Question

我在mysql数据库的地图上绘制了超过一千个标记。此页面map.php采用xml并获取信息。在此数组中，多个点在数据库中有多个条目，但谷歌地图仅显示最近标记的信息窗口。

我希望infowindow列出所有这些位置，类似于循环在php中的工作方式。因此，共享lat和long的所有内容都将位于一个信息窗口中

我使用的代码：

  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();});
}

所以这个问题已经出现了一百万次，但仍然没有真正的答案..（有人提到将标记集和蜘蛛作为显示这些结果的另一种方式，但我想要标记它们是怎样的） ..

提前谢谢你，我的进展很顺利，但如果没有这点工作，该项目也可能被分类..！：（

Answer 1

使用@ Dr.Molle链接我得到了它，如果有人在这个功能之后，这是我的新代码

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();});
 }

因为我想要自定义图标，并且我希望选择的一组标记始终位于顶部，我也必须修改图标代码，但它可以工作。非常感谢那些帮助

的人

google maps api infowindow多个标记，位置相同

1 个答案: