谷歌地图在一个标记中包含多个信息

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

   首先你必须检查这个属性是否已经存在，当不创建它并将值设置为一个空数组时：

   if(!markerContents[markerId]){
      标记内容[markerId] = [];
    } 

   然后，在创建html 的行之后，将html 推入数组：

   markerContents[markerId].push(html);

3. 为避免在同一位置创建多个标记，当数组中有超过 1 个项目时，请在创建标记之前离开当前迭代：

   if(markerContents[markerId].length>1){return;}

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

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

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

 function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener（标记，“点击”，函数（）{
        infoWindow.setContent(html.join('
'));
        infoWindow.open（地图，标记）；
      });
    }

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