带有多个信息的Google地图 [英] Google Maps with Multiple Information in one marker

问题描述

我正在开发一个包含一些关于地点的信息的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; 
 
 //根据您的PHP文件的名称更改此值
 downloadUrl（ajax2.php，函数（data）{
 var xml = data.responseXML; 
 var marker = 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）; 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
} 
  

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

以前感谢 可能的方法来实现它（可能有很多种方法）：

1. 在 downloadUrl（）
   

    var markerContents = {}; 




2. 循环您创建标记的位置将使用属性填充此对象。作为属性的名称分配点的字符串表示（将由 LatLng.toString（））返回。创建一个这个字符串的变量：
   
   

    var markerId = point.toString（）; 

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

    if（！markerContents [markerId]）{
    markerContents [markerId] = []; 
   } 

   
   
   

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

    markerContents [markerId] .push（html）;  pre> 




3. 避免在同一位置创建多个标记，在创建标记之前保留当前迭代， array：
   

    if（markerContents [markerId] .length> 1）{return;} 




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

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




5. 修改Marker的点击侦听器，以便他可以使用内容作为InfoWindowContent数组

函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html 。加入（< HR />））; 
 infoWindow.open（map，marker）; 
}）; 
} 

在同一个位置不再有多个标记，而是会有1个标记，其内容设置为全部html具有此位置的标记，由水平线限定。

I am developing a web application that contains some information about place. That place may have more than one agenda. Can I show more information in one marker, such as stack balloon?

This is my maps

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

This is my data

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

there are some places that have more than one agenda, and I want to show all of that agendas in one marker if the latitude and longitude are same.

this is my code to show marker depend on database, I put it in 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);
}

could i modify that code to show some information if latitude/longitude are same and show it in a balloon above marker?

thanks before

解决方案

Possible way to achieve it(there may be many ways):

1. create some object at the begin of the callback of downloadUrl()

   var markerContents={};

2. inside the loop where you create the markers populate this object with properties. As name for the properties assign the string-representation of the point(will be returned by LatLng.toString()). Create a variable of this string:

   var markerId = point.toString();

   First you have to check now if this property already exists, when not create it and set the value to an empty array:

   if(!markerContents[markerId]){
      markerContents[markerId] = [];
    } 

   Then, after the line where create the html, push the html into the array:

   markerContents[markerId].push(html);

3. to avoid the creation of multiple markers at the same position, leave the current iteration before you create the marker, when there are more than 1 item inside the array:

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

4. modify the call of bindInfoWindow(); , pass the array as argument instead of html

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

5. Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent

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

There will no longer be multiple markers at the same position, instead there will be 1 marker with the content set to the html of all markers with this position, delimited by a horizontal rule.

这篇关于带有多个信息的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！