Google Maps API 标记集群信息窗口答案

【问题标题】：Google Maps API Marker Clusters Info windowGoogle Maps API 标记集群信息窗口
【发布时间】：2014-02-18 23:19:57
【问题描述】：

如何将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>

【问题讨论】：

听起来您在问如何将信息窗口添加到标记。那是你的问题吗？如果是这样，它与没有集群器的情况没有什么不同。 MarkerClusterer example。您想在信息窗口中输入什么信息？

标签： google-maps google-maps-markers infowindow markerclusterer

【解决方案1】：

这是我在 MarkerClusterer 中将 InfoWindow 添加到标记的示例代码

没有注意到我的代码中需要 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 希望对您有所帮助。

【讨论】：

看起来它可能依赖于 JQuery。是吗？
我在我的 c# 项目中使用了它，但在这种情况下它也应该可以工作。
你的 C# 项目使用 JQuery 吗？
是的，它确实使用了 jQuery。
原来的问题没有。您应该在答案中包含对 JQuery 的依赖关系或删除依赖关系。