谷歌地图v3 - 标记不显示

Question

我正在尝试在Google地图上放置多个标记(API v3).我查看了Google文档以及此主题.地图绘制并居中到初始点,但地图上没有显示任何标记.

Firebug没有报告任何错误.

这是JS

<script type="text/javascript">

   var map;

    function initialize() {
            var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(41.056466,-85.3312009),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    }
    google.maps.event.addDomListener(window, 'load', initialize);

    //Add 1st marker
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
    var marker_0 = new google.maps.Marker({
        position: Latlng_0,
                  title:"0"});

        marker_0.setMap(map);

    //Add 2nd marker
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708);
    var marker_1 = new google.maps.Marker({
        position: Latlng_1,
        title:"1"});
        marker_1.setMap(map);

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

谢谢你的期待!

Answer 1

标记未显示的原因是因为代码的一部分在load事件被触发之前被执行并且initialize方法被调用 - 此时你的map变量已经被创建但仍然是null.

尝试添加代码以在initialize方法中添加标记

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.056466,-85.3312009),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    // Add 1st marker
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
    var marker_0 = new google.maps.Marker(
        {
            position: Latlng_0, 
            title:"0"
        }
    );

    marker_0.setMap(map);

    //Add 2nd marker
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708);
    var marker_1 = new google.maps.Marker(
        {
            position: Latlng_1,
            title:"1"
        }
    );

    marker_1.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

看到这个标记出现在这里的jsfiddle http://jsfiddle.net/KvugB/

Answer 2

我用这个代码.我希望它可以帮助你:

(function() {

window.onload = function() {

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(41.056466, -85.3312009),
      disableDefaultUI: false,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });


    // Creating the JSON data
    var json = [
        {
            "title": "Title 1",
            "lat": 41.057814980291,
            "lng": -85.329851919709,
            "description": ""
        },
        {
            "title": "Title 2",
            "lat": 41.057814981000,
            "lng": -85.8048,
            "description": ""
        },
    ]

    var styles = [
  {
   "featureType": "water",
   "elementType": "geometry.fill",
   "stylers": [
      { "visibility": "on" },
      { "color": "#0077bb" },
  { "lightness": 70 }
      ]
      },{
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "saturation": -100 },
      { "color": "#699e6b" },
      { "lightness": 76 }
      ]
      },{
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "off" }
      ]
      },{
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "color": "#ffffff" }
      ]
      }
      ];

       map.setOptions({styles: styles});



    // Creating a global infoWindow object that will be reused by all markers
    var infoWindow = new google.maps.InfoWindow();

    // Looping through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
            latLng = new google.maps.LatLng(data.lat, data.lng);




        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });

        // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
        (function(marker, data) {

            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, "click", function(e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });


        })(marker, data);

    }

}

   })();