Question

如何将info window添加到下面列出的Google地图marker Cluster？地图设计用于聚焦缩小的标记，但我希望缩放到最近的范围时显示信息窗口。

任何帮助都会很棒！提前致谢。

<!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>

Answer 1

这是我将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 希望它有所帮助。

Google Maps API标记群集信息窗口

1 个答案: