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

Question

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

这是我的地图

http://petamajelis.org/maps/index.php

这是我的数据

http://petamajelis.org/maps/ajax2.php

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

这是我的代码显示标记取决于数据库，我把它放在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

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

1. 在downloadUrl()的回调开始时创建一些对象

     var markerContents = {}; 

2. 在您创建标记的循环内部，使用属性填充此对象。 由于属性的名称分配了点的字符串表示（将由LatLng.toString()返回）。 创建此字符串的变量：

     var markerId = point.toString（）; 

   首先，您必须立即检查此属性是否已存在，何时不创建它并将值设置为空数组：

     如果（！markerContents [markerId]）{\n    markerContents [markerId] = [];\n  } 

   然后，在创建该行之后html ，推html到阵列：

     markerContents [markerId] .push（HTML）; 

3. 要避免在同一位置创建多个标记，请在创建标记之前保留当前迭代，当数组中有多个项目时：

     如果（markerContents [markerId]。长度> 1）{返回;} 

4. 修改bindInfoWindow();的调用bindInfoWindow(); ，将数组作为参数而不是html传递

     bindInfoWindow（marker，map，infoWindow，markerContents [markerId]）; 

5. 修改Marker的click-listener，以便他可以将数组的内容用作InfoWindowContent

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

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