使用Google Maps v3为聚合标记创建信息窗口

Question

使用Google Maps v3为聚合标记创建信息窗口

7

我正在开发一张地图，用于聚合标记以避免过于拥挤的情况。但是当我点击标记时，我想创建一个信息窗口来列出所有的标记。我试图寻求帮助，发现可以使用marker.getTitle()来实现，但这对我没有帮助，因为我使用的是makrewithLable对象而不是使用标题。我的问题是是否有方法将标题添加到标记中，或者我更喜欢使用标签来在信息窗口中列出它们。以下是我的工作副本。

google.setOnLoadCallback(initialize);
var globalMarker = [];
var map;

  function initialize() {
    var center = new google.maps.LatLng(45.4214, -75.6919);

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      disableDoubleClickZoom: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var infowindow = new google.maps.InfoWindow();
    for(i=0; i<50; i++) {
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
    //var latLng = new google.maps.LatLng(45.4214, -75.6919)
     markers[i] = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "Marker ID = "+i,
       labelAnchor: new google.maps.Point(30, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
      markers.push(markers);
    makeDiv(i, 15, "Marker #");
     google.maps.event.addListener(markers[i], 'click', function(e) {
    infowindow.setContent('Marker postion: '  + this.getPosition());
    infowindow.open(map, this);});
    }
    var clusterOptions = { zoomOnClick: false }
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';

// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

//----
//Get markers
var markers = cluster.getMarkers();

var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
    titles += markers[i].getTitle() + "\n";
}
//----


infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
});
  }

  function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
  }

  function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

谢谢您。

- jprbest

你说的“添加标题”是什么意思？你是指标记的红色标签不见了吗？我测试了你的代码，一切正常。你在JS控制台中有错误吗？还有一个title选项，它是一个悬停工具提示，也许这就是你想要的？ - Heitor Chang

难点在于定义什么是一个集群。您是否也希望在定义的集群中所有标记都打开相同的信息窗口？ - Heitor Chang

这是一个标记聚类器，它将把所有相邻的标记组合成一个聚类。http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html - jprbest

是的，我希望信息窗口将在我点击的聚类下显示所有标记的标签或标题。 - jprbest

是的，我已经让它工作了，但是因为我正在请求标题，所以我得到了未定义的信息，有没有办法可以获取标签而不是标题，或者如果您喜欢，我可以发送我的整个代码以了解发生了什么。 - jprbest

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Heitor Chang · Accepted Answer

关键变化在于titles += markers[i].labelContent + "\n";。（您可以使用点表示法或markers[i]["labelContent"]来引用您设置的任何属性）。我还更改了部分markers.push(markers)，以及当缩放更改时，窗口会消失（因为聚类数很可能会更改）。其他方面看起来不错！ http://jsfiddle.net/ErYub/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map { margin: 0; padding: 0; height: 100% }

.labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 90px;     
     border: 2px solid black;
     white-space: nowrap;
   }
    </style>
    <script type="text/javascript" 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-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></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">

var globalMarker = [];
var map;

  function initialize() {
    var center = new google.maps.LatLng(45.4214, -75.6919);

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      disableDoubleClickZoom: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];


    var infowindow = new google.maps.InfoWindow();
    for(i=0; i<50; i++) {
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
    //var latLng = new google.maps.LatLng(45.4214, -75.6919)
     marker = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "Marker ID = "+i,
       labelAnchor: new google.maps.Point(30, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
      markers.push(marker);

    makeDiv(i, 15, "Marker #");
     google.maps.event.addListener(markers[i], 'click', function(e) {
    infowindow.setContent('Marker postion: '  + this.getPosition());
    infowindow.open(map, this);});
    }
    var clusterOptions = { zoomOnClick: false }
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';

// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

//----
//Get markers
var markers = cluster.getMarkers();

var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
    titles += markers[i].labelContent + "\n";
}
//----


infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);

google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });

});
  }

  function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
  }

  function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
  }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="sidebar"></div>
  </body>
</html>