Question

我正在开发一个地图，它会聚集引脚，以防止过度拥挤的引脚，但我想创建一个infoWindow，当我点击标记时会列出所有标记，我试图得到一些帮助，发现我可以使用marker.getTitle（）来做这件事，但这对我没有帮助，因为我使用makrewithLable对象而不使用title，我的问题是为什么要为标记添加标题或者我更喜欢使用标签来列出它们infowindow。这是我工作的副本。

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);

谢谢

Answer 1

关键变化是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>

使用Google Maps v3为群集标记创建InfoWindow

1 个答案: