javascript - 在一个标记中包含多个信息的 Google map

Question

我正在开发一个网络应用程序，其中包含一些关于地点的信息。那个地方可能有不止一个议程。我能否在一个标记中显示更多信息，例如堆栈气球？

这是我的 map

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]){
      markerContents[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(marker, 'click', function() {
        infoWindow.setContent(html.join('<hr/>'));
        infoWindow.open(map, marker);
      });
    }

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