1

我正在开发一个 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);
}

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

谢谢之前

4

1 回答 1

3

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

  1. 在回调开始时创建一些对象downloadUrl() 
    变量标记内容={}；

  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

    函数绑定信息窗口（标记，地图，信息窗口，html）{
      google.maps.event.addListener（标记，“点击”，函数（）{
        infoWindow.setContent(html.join('<hr/>'));
        infoWindow.open（地图，标记）；
      });
    }

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

于 2013-09-29T21:25:23.223 回答