[英]Google Maps with Multiple Information in one marker
I am developing a web application that contains some information about place. 我正在开发一个包含一些有关地方信息的Web应用程序。 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 http://petamajelis.org/maps/index.php
This is my data 这是我的数据
http://petamajelis.org/maps/ajax2.php 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 这是我的代码显示标记取决于数据库,我把它放在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): 实现它的可能方法(可能有很多方法):
downloadUrl()
downloadUrl()
的回调开始时创建一些对象 var markerContents={};var markerContents = {};
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()
). 由于属性的名称分配了点的字符串表示(将由
LatLng.toString()
返回)。 Create a variable of this string: 创建此字符串的变量:
var markerId = point.toString();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]){\n markerContents[markerId] = [];
markerContents [markerId] = [];\n }
}
Then, after the line where create the html
, push the html
into the array: 然后,在创建该行之后
html
,推html
到阵列:
markerContents[markerId].push(html);markerContents [markerId] .push(HTML);
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;}如果(markerContents [markerId]。长度> 1){返回;}
modify the call of bindInfoWindow();
修改
bindInfoWindow();
的调用bindInfoWindow();
, pass the array as argument instead of html ,将数组作为参数而不是html传递
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);bindInfoWindow(marker,map,infoWindow,markerContents [markerId]);
Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent 修改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); }); }
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. 在同一位置将不再有多个标记,而是将有一个标记,其内容设置为具有此位置的所有标记的html,由水平规则分隔。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.