Question

我正在开发一个包含有关地点信息的Web应用程序。那个地方可能有不止一个议程。我可以在一个标记中显示更多信息，例如堆叠气球吗？

这是我的地图

这是我的数据

有些地方有多个议程，如果纬度和经度相同，我想在一个标记中显示所有议程。

这是我的代码显示标记取决于数据库，我把它放在index.php

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-6.270293,106.830995),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("ajax2.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var materi = markers[i].getAttribute("materi");
      var pemateri = markers[i].getAttribute("pemateri");
  var tanggal = markers[i].getAttribute("tanggal");
  var hari= markers[i].getAttribute("hari");
  var jam= markers[i].getAttribute("jam");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address + "<br/>" +materi+ " : "+pemateri+ "<br/>"+ hari +" "+tanggal+ " Jam : "+jam;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      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);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

如果纬度/经度相同并将其显示在标记上方的气球中，我可以修改该代码以显示一些信息吗？

之前感谢

Answer 1

实现它的可能方法（可能有很多方法）：

在downloadUrl()的回调开始时创建一些对象
```
var markerContents={};
```
使用属性填充此对象。由于属性的名称分配了点的字符串表示（将由LatLng.toString()返回）。创建此字符串的变量：
```
var markerId = point.toString();
```
首先，您必须立即检查此属性是否已存在，何时不创建它并将值设置为空数组：
```
if(!markerContents[markerId]){
   markerContents[markerId] = [];
 } 
```
然后，在创建html的行之后，将html推送到数组中：
```
markerContents[markerId].push(html);
```
为避免在同一位置创建多个标记，在创建标记之前保留当前迭代，当数组中有多个项目时：
```
if(markerContents[markerId].length>1){return;}
```
修改bindInfoWindow();的调用，将数组作为参数传递而不是html
```
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
```
修改标记的点击监听器，以便他可以将数组的内容用作InfoWindowContent

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

在同一位置将不再有多个标记，而是将有一个标记，其内容设置为具有此位置的所有标记的html，由水平线规则分隔。

带有多个信息的Google地图在一个标记中

1 个答案: