在Google地圖中添加標記陣列

Question

我需要一些幫助來在Google地圖中創建標記數組，以便它可以更高效，而不是逐個創建標記。我嘗試了以下，但它不起作用。任何人都有建議？

//create array to store a set of location 
var collection = new Array(); 

//a set of locations stored in array 
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); 
collection[1] = new google.maps.LatLng(13.74428, 100.5404525); 
collection[2] = new google.maps.LatLng(13.744108, 100.543098); 

var pointMarkerImage = new Array();//store image of marker in array 
var pointMarker = new Array();//store marker in array 

//create number of markers based on collection.length 
function setPoint(){ 
for(var i=0; i<collection.length; i++){ 

var pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); 
var pointMarker[i] = new google.maps.Marker({ 
     position: collection[i], 
     map: map, 
     icon: pointMarkerImage[i], 
     animation: google.maps.Animation.BOUNCE, 
     title: "collection"+ i 
    }); 

    google.maps.event.addListener(pointMarker[i], 'click', function() { 
      window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes") 
      }; 
    ); 
    } 
} 

Answer 1

我看到幾件事情：

1）在for循環，VAR pointM ......應該只是pointM ...添加VAR使得它不理你有外面的for循環集。

2）你有一個;之後的一個功能就是打破事情。

試試這個：

//create array to store a set of location 
var collection = new Array(); 

//a set of locations stored in array 
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); 
collection[1] = new google.maps.LatLng(13.74428, 100.5404525); 
collection[2] = new google.maps.LatLng(13.744108, 100.543098); 

var pointMarkerImage = new Array();//store image of marker in array 
var pointMarker = new Array();//store marker in array 

//create number of markers based on collection.length 
function setPoint(){ 
    for(var i=0; i<collection.length; i++){ 

    pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); 
    pointMarker[i] = new google.maps.Marker({ 
      position: collection[i], 
      map: map, 
      icon: pointMarkerImage[i], 
      animation: google.maps.Animation.BOUNCE, 
      title: "collection"+ i 
    }); 

    google.maps.event.addListener(pointMarker[i], 'click', function(){ 
     window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes"); 
    } 
    ); 
    } 
} 

Answer 2

這是我簡單的代碼，它工作正常。當你點擊標記時，它將根據標記的位置分別打開信息窗口。

<script> 
var locations = [ 
    ['Title A', 3.180967,101.715546, 1], 
    ['Title B', 3.200848,101.616669, 2], 
    ['Title C', 3.147372,101.597443, 3], 
    ['Title D', 3.19125,101.710052, 4] 
]; 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: new google.maps.LatLng(3.171368,101.653404), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow; 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[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)); 
} 
</script> 

<div data-role="page" id="map_result"> 
    <div data-role="header" data-position="fixed"><h1>Multiple Marker</h1></div> 
    <div data-role="content" style="padding:0;"> 
     <div id="map"></div> 
    </div> 
</div>