markerclusterer信息窗口 [英] markerclusterer info windows
本文介绍了markerclusterer信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
工作演示此处。这里是我的完整索引代码：
< html xmlns =http://www.w3.org/1999/xhtml >
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< title> Google Maps AJAX + mySQL / PHP Example< / title>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jstype =text / javascript>< / script>
< script src =markerclusterer.jstype =text / javascript>< / script>
< script type =text / javascript>
//<！[CDATA [
var map;
var markers = [];
var infoWindow;
var locationSelect;
var markerCluster = null;
var m;
var p = [];
var contentString;
$ b函数load（）{
map = new google.maps.Map（document.getElementById（map），{
center：new google.maps .LatLng（40，-100），
zoom：4，
mapTypeId：'roadmap'，
mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}） ;
infoWindow = new google.maps.InfoWindow（）;
locationSelect = document.getElementById（locationSelect）;
locationSelect.onchange = function（）{
var markerNum = locationSelect.options [locationSelect.selectedIndex] .value;
if（markerNum！=none）{
google.maps.event.trigger（markers [markerNum]，'click'）;
}
};
函数searchLocations（）{
var address = document.getElementById（addressInput）。value;
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{address：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
searchLocationsNear（results [0]。 geometry.location）;
} else {
alert（address +'not found'）;
}
}）;
}
函数clearLocations（）{
infoWindow.close（）;
for（var i = 0; i< markers.length; i ++）{
markers [i] .setMap（null）;
}
markers.length = 0;
locationSelect.innerHTML =;
var option = document.createElement（option）;
option.value =none;
option.innerHTML =查看所有结果：;
locationSelect.appendChild（option）;
函数searchLocations近（中）{
clearLocations（）;
var radius = document.getElementById（'radiusSelect'）。value;
var searchUrl ='genxml.php？lat ='+ center.lat（）+'& lng ='+ center.lng（）+'& radius ='+ radius;
downloadUrl（searchUrl，function（data）{
var xml = parseXml（data）;
var markerNodes = xml.documentElement.getElementsByTagName（marker）;
var bounds =新的google.maps.LatLngBounds（）;
（var i = 0; i< markerNodes.length; i ++）{
var name = markerNodes [i] .getAttribute（name）;
var address = markerNodes [i] .getAttribute（address）;
var distance = parseFloat（markerNodes [i] .getAttribute（distance））;
var foodID = markerNodes [i ] .getAttribute（foodID）;
var restaurantName = markerNodes [i] .getAttribute（restaurantName）;
var latlng = new google.maps.LatLng（
parseFloat（markerNodes [ i）.getAttribute（lat）），
parseFloat（markerNodes [i] .getAttribute（lng）））;
createOption（name，distance，i）;
createMarker（latlng，name，address，distance，foodID，restaurantName）;
bounds.extend （经纬度）;
}
map.fitBounds（bounds）;
locationSelect.style.visibility =visible;
locationSelect.onchange = function（）{
var markerNum = locationSelect.options [locationSelect.selectedIndex] .value;
google.maps.event.trigger（标记[markerNum]，'点击'）;
};
var clusterOptions = {zoomOnClick：false}
var markerCluster = new MarkerClusterer（map，markers，clusterOptions）;
var contentString ='这是一个例子';
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（markerCluster，mouseover，function（c）{
infowindow.open（map，marker）;
// alert（contentString）;
// log（mouseover：）;
// log（& mdash; cluster of center：+ c.getCenter（））;
// log（& mdash;集群中的管理标记数：+ c.getSize（））;
}）;
// google.maps.event.addListener（markerCluster，mouseout，function（c）{
// log（mouseout：）;
// log（& mdash;集群中心：+ c.getCenter（））;
// log（& mdash;集群中托管标记的数量：+ c.getSize（））;
// }）;
}）;
}
函数createMarker（latlng，name，address，distance，foodID，restaurantName）{
var html =< b> + name +< / b>< br /> +地址+< br /> +距离+< br /> + foodID +：食物ID+< br /> +餐厅名称;
var marker = new google.maps.Marker（{
map：map，
position：latlng
}）;
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.setContent（html）;
infoWindow.open（map，marker）;
}）;
markers.push（marker）;
函数createOption（name，distance，num）{
var option = document.createElement（option）;
option.value = num;
option.innerHTML = name +（+ distance.toFixed（1）+）;
locationSelect.appendChild（option）;
}
函数downloadUrl（url，callback）{
var request = window.ActiveXObject？
new ActiveXObject（'Microsoft.XMLHTTP'）：
new XMLHttpRequest;
request.onreadystatechange = function（）{
if（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request.responseText，request.status）;
}
};
request.open（'GET'，url，true）;
request.send（null）;
函数parseXml（str）{
if（window.ActiveXObject）{
var doc = new ActiveXObject（'Microsoft.XMLDOM'）;
doc.loadXML（str）;
return doc;
} else if（window.DOMParser）{
return（new DOMParser）.parseFromString（str，'text / xml'）;
}
}
函数doNothing（）{}
//]]>
函数log（h）{
document.getElementById（log）。innerHTML + = h +< br />;
}
< / script>
< / head>
< body style =margin：0px; padding：0px;的onLoad = 负载（） >
< div>
< input type =textid =addressInputsize =10/>
< select id =radiusSelect>
< option value =25selected> 25mi< / option>
< option value =100> 100mi< / option>
< option value =200> 200mi< / option>
< / select>
< input type =buttononClick =searchLocations（）value =Search/>
< / div>
< div>< select id =locationSelectstyle =width：100％; visibility：hidden>< / select>< / div>
< div id =mapstyle =width：100％; height：80％>< / div>
< div id =log>< / div>
< / body>
< / html>
基本上归结为这部分，我可能只是把它放在错误的地方： p>
var contentString ='这是一个例子';
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（markerCluster，mouseover，function（c）{
infowindow.open（map，marker）;
我以为我正在正确地做信息窗口，但它不会出现，我知道鼠标悬停的作品，因为当我测试它时，注释掉的警报就起作用了。想知道我做错了什么？
解决方案
infoWindow.Open有两个重载
infoWindow.Open（map，marker）
infoWindow.Open（map）
由于您想将其添加到群集（而不是标记），因此您应该使用第二个元素。
您必须设置获取的位置集群中心
google.maps.event.addListener（markerCluster，mouseover，function（mCluster）{
infowindow.content + =< div> Something< \ / div>;
infowindow.setPosition（mCluster.getCenter（））;
infowindow.open（map）;
}）;
我知道它是有效的，因为我只是做了它而已
< a href =https://stackoverflow.com/questions/5997070/google-maps-api-v3-infobubble-in-markerclusterer> google maps api v3 + infoBubble in markerClusterer
Let me say I am still fairly new to google maps and javascript. i've been mixing together the google store locator tutorial with some other stuff. So far, I am using marker clusterer plus (link), basically the same as marker clusterer for google maps api v3 but with some added functionality like mouse overs and stuff like that. I'm trying to get an info window to come up when you mouse over a cluster.
working demo here. here is my full index code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
var markerCluster = null;
var m;
var p = [];
var contentString;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var foodID = markerNodes[i].getAttribute("foodID");
var restaurantName = markerNodes[i].getAttribute("restaurantName");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address, distance, foodID, restaurantName);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
infowindow.open(map,marker);
//alert(contentString);
//log("mouseover: ");
//log("—Center of cluster: " + c.getCenter());
//log("—Number of managed markers in cluster: " + c.getSize());
});
// google.maps.event.addListener(markerCluster, "mouseout", function (c) {
//log("mouseout: ");
// log("—Center of cluster: " + c.getCenter());
// log("—Number of managed markers in cluster: " + c.getSize());
// });
});
}
function createMarker(latlng, name, address, distance, foodID, restaurantName) {
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + distance + "<br/>" + foodID + ": the food id" + "<br/>" + restaurantName;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
function log(h) {
document.getElementById("log").innerHTML += h + "<br />";
}
</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="load()">
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button" onClick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>
<div id="log"></div>
</body>
</html>
Basically it comes down to this part, which I may just be putting in the wrong place:
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
infowindow.open(map,marker);
I thought I was doing the info window correctly, but it isn't coming up. I know the mouseover works because the commented out alert works when i test it. any ideas what I am doing wrong?
解决方案
infoWindow.Open has two overloads
infoWindow.Open(map, marker)
infoWindow.Open(map)
Since you wanto to add it to a cluster (not a marker) you should use the second one
You must set the position getting the center of the cluster
google.maps.event.addListener(markerCluster, "mouseover", function (mCluster) {
infowindow.content += "<div>Something<\/div>";
infowindow.setPosition(mCluster.getCenter());
infowindow.open(map);
});
I know it works because I just did it
google maps api v3 + infoBubble in markerClusterer
这篇关于markerclusterer信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
