[英]Google Maps API Marker Clusters Info window
如何向下面列出的Google Maps marker Cluster
添加info window
? 该地图旨在将缩小的标记聚集在一起,但是我希望将标记放大到最接近的程度以显示信息窗口。
任何帮助将是巨大的! 提前致谢。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
<style>
#map_canvas {
width: 1000px;
height: 800px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
function initialize() {
var pos = new google.maps.LatLng(-39.431441,-71.286622);
var myOptions = {
zoom: 2,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
map.setCenter(pos);
var all = [
[37.3952,-91.5482],
[37.212,-90.168],
[37.3331,-90.0782]
];
var gmarkers = [];
for (var i = 0; i < all.length; i++) {
var lat = all[i][0];
var lng = all[i][1];
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({map: map, position: latLng,});
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="height:800px;width:1000px;"></div>
</body>
</html>
这是将InfoWindow添加到MarkerClusterer中的标记的示例代码
没注意到我的代码中需要jQuery,所以假设我们包含以下脚本:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
您可以使用以下代码。
感谢geocodezip。
var info = new google.maps.InfoWindow({
maxWidth: 200,
map: map
});
/* <img src="data:image/jpeg;base64{binary data}" /> */
google.maps.event.addListener(marker, 'click', function () {
var $infoWindowContent = $("YourText);
info.setContent($infoWindowContent[0]);
info.open(map, this);
});
如我所见,您有一个用于存储文本的for循环,因此建议您将其添加到for loop
希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.