带有自定义图标的Google Maps API V3的多个标记 [英] Multiple Markers for Google Maps API V3 With Custom Icon

问题描述

我在我的Google地图上显示多个标记时遇到问题。我一直在尝试从互联网上的东西，但大部分时间地图只是打破。编辑：我设法得到多个标记。我现在只需要添加信息窗口给每个。

我更新的代码如下：

 < script type =text / javascript> 
函数initialize（）{
 latLngs = [
 new google.maps.LatLng（44.3118328，-79.5549532），
 google.maps.LatLng（44.3118325，-80.5549533）， 
 new google.maps.LatLng（44.3118326，-81.5549534），
 new google.maps.LatLng（44.3118327，-82.5549535）
]; 
 
 var latlng = new google.maps.LatLng（44.3118328，-79.5549532）; 
 var myOptions = {
 zoom：15，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions）; 
 
 
 var contentString ='< div id =mapinfowindow>'+'1970 Thompson St< br> Innisfil'+'< br>'+'$ 329,900'
 +'< a href =http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf> < br>< br>检视小册子< / a>< / div>'; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString，
}）; 
 
 var image = new google.maps.MarkerImage（$ b $ images / marker.png'，
 new google.maps.Size（50,50），
新的google.maps.Point（0,0），
新google.maps.Point（25,50）
）; 
 
 var shadow = new google.maps.MarkerImage（
 images / markershadow.png'，
 new google.maps.Size（78,50），
新的google.maps.Point（0,0），
新google.maps.Point（25,50）
）; 
 
 var shape = {
 coord：[28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10 ，42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45 ，23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35 ，37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24 ，47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35 ，10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4 ，22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,​​6,12,6,11,7,10 ，8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3]，
类型：'poly'
}; 
 
 
 var markers = new Array（latLngs.length）; 
 
 for（var i = 0; i< markers.length; i ++）{
 markers [i] = new google.maps.Marker（{
 position：latLngs [ i]，
标题：标记+ i，
图标：图像，
阴影，
映射：映射，
形状：形状
 }）; 
标记[i] .setMap（map）; 
} 
 
 for（var i2 = 0; i2< markers.length; i2 ++）{
 google.maps.event.addListener（markers [i2]，'click' ，function（）{
 infowindow.open（map，markers [i2]）; 
}）; 
} 
 
} 
  

我现在需要添加信息窗口到每个标记，每个标记在窗口内都有其独特的内容。

感谢您的时间。 解决方案

假设您有一个LatLng对象数组调用 latLngs ，并且您希望每个对象都有一个标记。你可以这样做（在你的问题中考虑你的代码的尾部并修改它）：

  var markers =新阵列（latLngs.length）; 
 for（var i = 0; i< markers.length; i ++）{
 markers [i] = new google.maps.Marker（{
 position：latLngs [i]，
标题：标记+ i，
图标：图像，
阴影，阴影，
映射：映射，
形状：形状
}）; 
标记[i] .setMap（map）; 
 
 $ / code> 

最主要的是你不能重用你的 marker 变量。你需要为每个标记使用一个不同的变量，因此是数组。

I'm having problems with making multiple markers appear on my Google Map. I've been trying stuff from all over the internet but most of the time the map just breaks.

EDIT: I managed to get the multiple markers going. I now only need to add the info windows to each.

My updated code is as follows:

<script type="text/javascript">
function initialize() {
latLngs = [ 
    new google.maps.LatLng(44.3118328, -79.5549532),
    new google.maps.LatLng(44.3118325, -80.5549533),
    new google.maps.LatLng(44.3118326, -81.5549534),
    new google.maps.LatLng(44.3118327, -82.5549535)
    ];

var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);


var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
+'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
});

      var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shadow = new google.maps.MarkerImage(
'images/markershadow.png',
new google.maps.Size(78,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shape = {
coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
type: 'poly'
};


var markers = new Array(latLngs.length);

for (var i = 0; i < markers.length; i++) {
 markers[i] = new google.maps.Marker({
    position: latLngs[i],
    title:"Marker "+i,
    icon: image,
    shadow: shadow,
    map: map,
    shape: shape
});
markers[i].setMap(map);     
}

for (var i2 = 0; i2 < markers.length; i2++) {
    google.maps.event.addListener(markers[i2], 'click', function() {
    infowindow.open(map,markers[i2]);
    });
}

}

I now need to add the info windows to each marker each with its unique content inside the window.

Thank you for your time.

解决方案

Let's say you have an array of LatLng objects call latLngs and that you wanted a marker for each of those objects. You might do it something like this (taking the tail end of your code in your question and modifying it):

var markers = new Array(latLngs.length);
for (var i = 0; i < markers.length; i++) {
    markers[i] = new google.maps.Marker({
        position: latLngs[i],
        title:"Marker "+i,
        icon: image,
        shadow: shadow,
        map: map,
        shape: shape
    });
    markers[i].setMap(map);
}

The main thing is that you can't reuse your marker variable. You need to use a different variable for each marker, hence the array.

这篇关于带有自定义图标的Google Maps API V3的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！