Javascript 在Google地图中添加标记数组

Javascript 在Google地图中添加标记数组,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我需要一些帮助在谷歌地图中创建一个标记数组,这样它可以更有效,而不是一个接一个地创建一个标记。我尝试了以下方法,但不起作用。有人有什么建议吗 //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.507210

我需要一些帮助在谷歌地图中创建一个标记数组,这样它可以更有效,而不是一个接一个地创建一个标记。我尝试了以下方法,但不起作用。有人有什么建议吗

//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")
             };
    );
    }
}
//创建数组以存储一组位置
var collection=新数组();
//存储在数组中的一组位置
集合[0]=新的google.maps.LatLng(13.74216771649997100.50721049308777);
集合[1]=新的google.maps.LatLng(13.74428,100.5404525);
集合[2]=新的google.maps.LatLng(13.744108100.543098);
var pointMarkerImage=新数组()//在数组中存储标记的图像
var pointMarker=新数组()//数组中的存储标记
//基于collection.length创建标记数
功能设定点(){
对于(var i=0;i我看到了一些事情:

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");
    }
    );
  }
}
//创建数组以存储一组位置
var collection=新数组();
//存储在数组中的一组位置
集合[0]=新的google.maps.LatLng(13.74216771649997100.50721049308777);
集合[1]=新的google.maps.LatLng(13.74428,100.5404525);
集合[2]=新的google.maps.LatLng(13.744108100.543098);
var pointMarkerImage=new Array();//在数组中存储标记的图像
var pointMarker=new Array();//将标记存储在数组中
//基于collection.length创建标记数
功能设定点(){

对于(var i=0;i这是我的简单代码,它可以正常工作。当您单击marker时,它将根据该marker的位置分别打开信息窗口

<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>

变量位置=[
[标题A',3.180967101.715546,1],
[标题B',3.200848101.616669,2],
[标题C',3.147372101.597443,3],
[标题D',3.19125101.710052,4]
];
var map=new google.maps.map(document.getElementById('map'){
缩放:12,
中心:新google.maps.LatLng(3.171368101.653404),
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow;
var标记,i;
对于(i=0;i
我复制了Qiqi Abaziz先生并做了一些改进。这是完整版本

<script type="text/javascript">

function initMap() {

    var locations = [
         ['Title A', 3.180967,101.715546],
         ['Title B', 3.200848,101.616669],
         ['Title C', 3.147372,101.597443],
         ['Title D', 3.19125,101.710052]
    ];
    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>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOURAPIKEY=initMap">
</script>


<style type="text/css">
  #map { height: 400px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width: 80%;}
</style>

<div id="map"></div>

函数initMap(){
变量位置=[
[“标题A”,3.180967101.715546],
[标题B',3.200848101.616669],
[标题C',3.147372101.597443],
[标题D',3.19125101.710052]
];
var map=new google.maps.map(document.getElementById('map'){
缩放:12,
中心:新google.maps.LatLng(3.171368101.653404),
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow;
var标记,i;
对于(i=0;i
你确定你正在调用
设置点()
?你在哪里调用这个函数?你没有想到for循环,你不需要为每个数组索引创建一个新的latlng对象,你只需要存储数字并执行for(tipical for){new google.map.(lat[i])类似的东西谢谢你的评论,我可能需要发布整个代码以在下面进行适当的查看。谢谢你的反馈。这是一个粗心的错误!不知道为什么它仍然不起作用。我可能想在下面发布整个代码以提供更好的图片。该函数(i)返回函数非常漂亮。与此方法相关,即如何删除标记: