谷歌地圖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);

    }

}

   })();

Answer 3

這是對@JoanManuelHernández答案的回復，但我無法在評論中發布格式化代碼。

瓊，你的解決方案很棒; 這和我自己做的非常相似。 創建標記位置數組比為每個標記位置使用單個變量要好。

我想提出一些小改進建議。 一個是你有一個名為json的數組。 這不是一個非常具有描述性的名稱; json可能意味着任何類型的數據。 如何稱它為places或locations之類的東西？

接下來，如果您有創建閉包來處理異步回調的循環，我認為如果將整個循環體移動到它自己的函數中，它會更容易理解它是如何工作的。 那你就不需要內聯匿名函數了。 所以這段代碼：

// 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);
}

會成為：

// Looping through the places list
for( var i = 0, length = places.length;  i < length;  i++ ) {
    addPlace( places[i] );
}

// Add one place marker
function addPlace( place ) {
    var latLng = new google.maps.LatLng( place.lat, place.lng );

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

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

它做同樣的事情，這樣簡單一點。

另外一個想法：風格化的地圖非常酷 - 我自己也是風格地圖的忠實粉絲 - 但是我想知道為了簡單起見它是否應該留在這里，因為它與OP的問題無關？

如果您喜歡，請隨意將這些想法納入您自己的答案中，如果其他人發現此變體有用，請提供Joan的回答，因為這是原始代碼的來源。