谷歌地圖v3 - 不顯示標記

Question

我想在Google地圖（API v3）上放置多個標記。我看了一下Google文檔，也是這個thread。地圖繪製並居中到初始點，但地圖上沒有顯示標記。

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事件被觸發並且初始化方法被調用 - 此時您的map變量已經創建但仍然爲空。

嘗試添加代碼添加標記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的答案，因爲這是原始代碼的來源。