谷歌地图与一个标记中的多个信息

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

这是我的地图

这是我的数据

也有一些地方是有一个以上的议事日程，我想告诉所有的议程在一个标记中，如果纬度和经度相同。

这是我的代码显示标记依赖于数据库中，我把它放在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); 
}

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

感谢之前

来源

2013-09-29 user2829199

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

在downloadUrl()
```
var markerContents={};
```
回调的开始的循环，内创建一些对象您创建标记用属性填充此对象。作为属性的名称分配点的字符串表示（将返回LatLng.toString()）。创建这个字符串的变量：你现在要检查，如果该属性已经存在，如果不创建它并将其值设置为空数组
```
var markerId = point.toString();
```
第一：
```
if(!markerContents[markerId]){ 
    markerContents[markerId] = []; 
}
```
于是，线路后其中创建html，推html到阵列：
```
markerContents[markerId].push(html);
```
，以避免多个标记的创建在相同的位置，离开当前迭代在创建标记之前，当有超过1项数组内：
```
if(markerContents[markerId].length>1){return;}
```
修改bindInfoWindow();通话，传递数组作为参数，而不是HTML
```
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
```
修改的点进率Marker（标记）的侦听器，以便他可以使用阵列的内容作为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，由水平线定界。

来源

2013-09-29 21:25:23

谷歌地图与一个标记中的多个信息

回答

相关问题