如何讓Google Maps 3 api顯示一組標記？

-2

我想顯示一個標記數組使用簡單的for循環，到目前爲止我一直不成功。我在上週已經看過其他類似的問題和答案，並且我無法使用我的數組加載地圖。我希望有人能看我的代碼，並告訴我我做錯了什麼。如何讓Google Maps 3 api顯示一組標記？

<script type="text/javascript"> 
    function initialize() { 
    var mapCenter = new google.maps.LatLng(48.0625, -90.4394444444); 
    var mapOptions = { 
    zoom: 4, 
    center: mapCenter 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var permitEntranceLatLang = [ 
     ['Gunflint District', 48.0625, -90.4394444444, 1], 
     ['LaCroix District',47.9144 ,-92.322, 2], 
     ['Kawishiwi District',47.9533333333, -91.7207898333, 3], 
    ]; 


    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(permitEntranceLatLang[i][1], permitEntranceLatLang[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    }; 

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



</script> 

<body> 
<div id="map-canvas"></div> 
</body>

來源

2015-08-23 drice89

更名爲所有從locations到permitEntranceLatLang。
定義信息窗口var infowindow = new google.maps.InfoWindow()

Read the documentation for more info

function initialize() { 
 
    var mapCenter = new google.maps.LatLng(48.0625, -90.4394444444); 
 
    var mapOptions = { 
 
     zoom: 4, 
 
     center: mapCenter 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var permitEntranceLatLang = [ 
 
     ['Gunflint District', 48.0625, -90.4394444444, 1], 
 
     ['LaCroix District', 47.9144, -92.322, 2], 
 
     ['Kawishiwi District', 47.9533333333, -91.7207898333, 3] 
 
    ]; 
 
    var infowindow = new google.maps.InfoWindow() 
 

 
    var marker, i; 
 

 
    for (i = 0; i < permitEntranceLatLang.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(permitEntranceLatLang[i][1], permitEntranceLatLang[i][2]), 
 
      map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
      return function() { 
 
       infowindow.setContent(permitEntranceLatLang[i][0]); 
 
       infowindow.open(map, marker); 
 
      } 
 
     })(marker, i)); 
 
    }; 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

JSFiddle demo

來源

2015-08-23 00:53:50

您是否嘗試過點擊標記？看起來'infowindow'是不確定的.. –

當然是。您需要先創建它。給我幾分鐘，我會告訴你如何去做 –

不，我不.. OP需要..哈哈 –

您發佈的代碼缺少結束「}」
一旦我解決，我得到一個自我解釋JavaScript錯誤：

Uncaught ReferenceError: locations is not defined

你改變了位置陣列的名稱permitEntranceLatLang所以這是不正確：

for (i = 0; i < locations.length; i++) {

將其更改爲：

for (i = 0; i < permitEntranceLatLang.length; i++) {

而你的代碼有效。

proof of concept fiddle

代碼片段：

var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var mapCenter = new google.maps.LatLng(48.0625, -90.4394444444); 
 
    var mapOptions = { 
 
    zoom: 4, 
 
    center: mapCenter 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var permitEntranceLatLang = [ 
 
    ['Gunflint District', 48.0625, -90.4394444444, 1], 
 
    ['LaCroix District', 47.9144, -92.322, 2], 
 
    ['Kawishiwi District', 47.9533333333, -91.7207898333, 3] 
 
    ]; 
 

 

 
    var marker, i; 
 

 
    for (i = 0; i < permitEntranceLatLang.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(permitEntranceLatLang[i][1], permitEntranceLatLang[i][2]), 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(permitEntranceLatLang[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    }; 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

來源

2015-08-23 00:57:27 geocodezip

如何讓Google Maps 3 api顯示一組標記？

回答

相關問題