谷歌地图API infowindow多个标记，相同的位置 [英] google maps api infowindow multiple markers, same location

问题描述

我从一个mysql数据库的地图上绘制了上千个标记。这个页面map.php需要一个xml并抓取信息。在这个数组中，有几个点在数据库中有多个条目，但是Google地图只显示绘制最近标记的infowindow。

我想要infowindow列出所有这些位置，类似于循环如何在PHP中工作。因此，所有共享一个经纬度的东西都在一个信息窗口内

我使用的代码：

  downloadUrl（map / map_data_source.php，function（data）{
 var xml = data.responseXML; 
 
 var markers = xml.documentElement .getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var date = markers [i] .getAttribute（date）; 
 var artist = markers [i] .getAttribute（artist）; 
 var venue = markers [i] .getAttribute（venue）; 
 var address = markers [i] .getAttribute（ address）; 
 var city = markers [i] .getAttribute（city）; 
 var idgigs = markers [i] .getAttribute（id）; 
 var country =标记[i] .getAttribute（country）; 
 var count = markers [i] .getAttribute（count）; 
 var swith = markers [i] .getAttribute（swith）; 
 var stage = markers [i] .getAttribute（stage）; 
 var type = markers [i] .getAttribute（type）; 
 var p oint = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 var html = 
'< div id =infoWindowwidth =600px>< img src =projects / components /'+ artist +'>'+ 
'< br>< br>'+ date + 
'< br>< b>'+ venue +'< / b> /'+ city +'< br>'+ swith + stage + 
'< br>< b>< a class =second_sub_menuhref =../ projects / bands.php？sub = Setlist& info ='+ artist +'& id ='+ idgigs +'> SHOW INFORMATION< / a>< / b>'; 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 icon：'http：//chart.apis。 google.com/chart?ch=chs=d_map_pin_letter&chld='+ count +'|'+ type +'| 000000'，
 zIndex：i 
 
}）; 
 bindInfoWindow（marker，map，infoWindow，html）; 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
 if（map.getZoom（）< 4）map.setCenter（marker.getPosition（））; $ b $ （map.getZoom（）< 4）map.setZoom（4）; 
}）; 
 google.maps.event.addListener（map，click，function（）{infoWindow.close（）;}）; 
} 
  

所以这个问题已经出现了一百万次，但仍然出现是不是真正的答案..（有提到标记群体和蜘蛛作为显示这些结果的另一种方式，但我希望标记如何）。

谢谢提前多少，我进步得很好，但没有这个工作，这个项目可能会被分类。 ：（$ / b>

解决方案

使用@ Dr.Molle链接我得到了它的工作，以防万一任何人在此功能之后，这是我的新功能代码

  var markerContents = {}; 
 var infoWindow = new google.maps.InfoWindow; 
 
 downloadUrl（map / map_data_source.php，函数（data）{
 
 var xml = data.responseXML; 
 
 
 var markers = xml。 documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 
 var date = markers [i] .getAttribute（date ）; 
 var artist = markers [i] .getAttribute（artist）; 
 var venue = markers [i] .getAttribute（venue）; 
 var address = markers [ i] .getAttribute（address）; 
 var city = markers [i] .getAttribute（city）; 
 var idgigs = markers [i] .getAttribute（id）; 
 var country = markers [i] .getAttribute（country）; 
 var count = markers [i] .getAttribute（count）; 
 var swith = markers [i] .getAttribute（ swith）; 
 var st age = markers [i] .getAttribute（stage）; 
 var type = markers [i] .getAttribute（type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）） ））; 
 var customIcons = {
 FFFFFF：{
 icon：'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+ count +'|'+键入+'| 000000'
}，
即将到来：{
图标：'../map/marker/orange.png'
} 
}; 
 var markerId = point.toString（）; 
 if（！markerContents [markerId]）{
 markerContents [markerId] = []; 
} 
 
 var html = 
'< div id =infoWindowwidth =600px>< img src =projects / components /'+ artist + '>'+ 
'< br>< br>'+ date + 
'< br>< b>'+ venue +'< / b> /'+ city +'< br>'+ swith + stage + 
'< br>< b>< a class =second_sub_menuhref =../ projects / bands.php？sub = Setlist& info ='+ artist +'& id ='+ idgigs +'> SHOW INFORMATION< / a>< / b>'; 
 
 var icon = customIcons [type] || {}; 
 
 
 markerContents [markerId] .push（html）; 
 
 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 zIndex：i ，
图标：icon.icon 
}）; 
 
 
 
 
 bindInfoWindow（marker，map，infoWindow，markerContents [markerId]）; 
 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html.join（'< hr />'））; 
 infoWindow.open（map，marker）; 
 
 if（map.getZoom（）< 4）map.setCenter（marker.getPosition（））; 
 if（map.getZoom（）< 4）map.setZoom（4）; 
}）; 
 google.maps.event.addListener（map，click，function（）{infoWindow.close（）;}）; 
 
 $ / code> 

因为我想要自定义图标，我想要一组选定的标记在顶部，我不得不修改图标代码，但它的工作原理。所以，感谢那些帮助
的人

I have plotted over a thousand markers on a map from a mysql database. This page map.php takes an xml and grabs the information. Within this array, several points have multiple entries in the database, but google maps only shows the infowindow for the most recent marker plotted.

I'd like the infowindow to list all for that locations, similar to how a loop would work in php. So everything that shares a lat and a long would be within the one info window

The code i use:

  downloadUrl("map/map_data_source.php", function(data) {
    var xml = data.responseXML;

    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var date = markers[i].getAttribute("date");
      var artist = markers[i].getAttribute("artist");
      var venue = markers[i].getAttribute("venue");
      var address = markers[i].getAttribute("address");
      var city = markers[i].getAttribute("city");
  var idgigs = markers[i].getAttribute("id");
      var country = markers[i].getAttribute("country");
  var count = markers[i].getAttribute("count");
  var swith = markers[i].getAttribute("swith");
  var stage = markers[i].getAttribute("stage");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html =
  '<div id="infoWindow" width="600px"><img src="projects/components/' + artist + '">' +
  '<br><br>' + date +
  '<br><b>' + venue + '</b> / ' + city + '<br>' + swith + stage +
  '<br><b><a class="second_sub_menu" href="../projects/bands.php?sub=Setlist&info=' + artist + '&id=' + idgigs + '">SHOW INFORMATION</a></b>';

      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + count + '|' + type + '|000000',
        zIndex: i

      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
if (map.getZoom() < 4) map.setCenter(marker.getPosition());
if (map.getZoom() < 4) map.setZoom(4); 
  });
  google.maps.event.addListener(map, "click", function() {infoWindow.close();});
}

So this question has appeared a million and one times, but there still appears to be no real answer.. (There are mentions to markclusters and spiderers as another way of showing these results, but I want the markers how they are)..

Thank you mucho in advance, I have progressed well, but without this bit working, the project may as well be binned..! :(

解决方案

Using @Dr.Molle link i got it working, in case anyone is after this feature, this is my new code

var markerContents={};
  var infoWindow = new google.maps.InfoWindow;

downloadUrl("map/map_data_source.php", function(data) {

  var xml = data.responseXML;


  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {

  var date = markers[i].getAttribute("date");
  var artist = markers[i].getAttribute("artist");
  var venue = markers[i].getAttribute("venue");
  var address = markers[i].getAttribute("address");
  var city = markers[i].getAttribute("city");
  var idgigs = markers[i].getAttribute("id");
  var country = markers[i].getAttribute("country");
  var count = markers[i].getAttribute("count");
  var swith = markers[i].getAttribute("swith");
  var stage = markers[i].getAttribute("stage");
  var type = markers[i].getAttribute("type");
  var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
  var customIcons = {
 FFFFFF: {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + count + '|' + type + '|000000'
},
upcoming: {
icon: '../map/marker/orange.png'
 }
};
  var markerId = point.toString();
  if(!markerContents[markerId]){
  markerContents[markerId] = [];
  }

var html =
   '<div id="infoWindow" width="600px"><img src="projects/components/' + artist + '">' +
  '<br><br>' + date +
  '<br><b>' + venue + '</b> / ' + city + '<br>' + swith + stage +
  '<br><b><a class="second_sub_menu" href="../projects/bands.php?sub=Setlist&info=' + artist + '&id=' + idgigs + '">SHOW INFORMATION</a></b>';

  var icon = customIcons[type] || {};


markerContents[markerId].push(html);



    var marker = new google.maps.Marker({
    map: map,
    position: point,
            zIndex: i,
    icon: icon.icon
});




 bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);

  }
  });
  }

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html.join('<hr/>'));
infoWindow.open(map, marker);

 if (map.getZoom() < 4) map.setCenter(marker.getPosition());
 if (map.getZoom() < 4) map.setZoom(4); 
 });
 google.maps.event.addListener(map, "click", function() {infoWindow.close();});
 }

Because i wanted custom icons and I wanted a select group of markers to always be at the top, i had to modify the icons code too, but it works. So thank you to those that helped

这篇关于谷歌地图API infowindow多个标记，相同的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！