7

我正在开发一个地图，该地图将聚集针脚以防止针脚过于拥挤，但我想创建一个 infoWindow，当我单击标记时将列出所有标记，我试图获得一些帮助，发现我可以使用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);

谢谢

4

1 回答 1

12

关键的变化是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>
于 2012-05-09T18:31:59.847 回答