GoogleMaps MarkerClusterer 信息窗口位置

Question

我对 markercluster 的 infoWindow 的位置有疑问。它不会出现在标记位置。相反，它位于地图的左上角。这是我的代码：

<script type="text/javascript">
  function initialize(cities) {
    var mapOptions = {
      center: new google.maps.LatLng(48.220, 15.199),
      zoom: 9,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var markers=[];
    var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});

    //markerCluster should be always above the geocoder-->
     geocoder = new google.maps.Geocoder();

     for (var i = 0; i < cities.length; i++) {
      var city = cities[i];
      geocoder.geocode({'address': city.city+" Niederösterreich"}, function(results, status){
       if (status == google.maps.GeocoderStatus.OK) {
        position=results[0].geometry.location;
        var marker = new google.maps.Marker({
         map: map,
         position: position,
         title: "Ort: "+city.city + "\nBeitrag: " + city.title +"\nRed.: "+ city.reporter +"\nDatum: "+ city.storydate,
        });
        // below code alway lies inside the loop
        markers.push(marker);
        markerCluster.addMarker(marker);
       }
      });
     };

      // Listen for a cluster to be clicked
      google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        var markers = markerCluster.getMarkers();

        var content = '';
        for (var i = 0; i < markers.length; i++) {
          var marker = markers[i];
          content += marker.title;
          content += ("<br>");
        };
        // Convert lat/long from cluster object to a usable MVCObject
        var info = new google.maps.MVCObject;

        var infowindow = new google.maps.InfoWindow();
        // infowindow.setPosition(this.markerCluster.getCenter());
        // infowindow.setPosition(latLng);
        infowindow.close();
        infowindow.setContent(content);
        infowindow.open(map, info);
        google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });
      });

    }
  </script>

Answer 1

您的 MVCObject 没有任何属性。根据 documentation，如果您将可选的 anchor 参数传递给函数 .open，它必须公开一个 LatLng 位置属性，而您的则没有（因为它没有没有任何属性，它不能暴露任何属性。

open(map?:Map|StreetViewPanorama, anchor?:MVCObject)

Return Value: None

Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

最简单的解决方案是不使用 anchor 参数，直接设置信息窗口的位置。

google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
    var markers = cluster.getMarkers();

    var content = '';
    for (var i = 0; i < markers.length; i++) {
        var marker = markers[i];
        content += marker.title;
        content += ("<br>");
    }
    var infowindow = new google.maps.InfoWindow();
    infowindow.setPosition(cluster.getCenter());
    infowindow.setContent(content);
    infowindow.open(map);
    google.maps.event.addListener(map, 'zoom_changed', function () {
        infowindow.close();
    });
});

proof of concept fiddle

代码片段：

var geocoder;
var markers = [];

function initialize(cities) {
  var mapOptions = {
    center: new google.maps.LatLng(48.220, 15.199),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var markerCluster = new MarkerClusterer(map, markers, {
    zoomOnClick: false
  });

  //markerCluster should be always above the geocoder-->
  geocoder = new google.maps.Geocoder();

  for (var i = 0; i < cities.length; i++) {
    var city = cities[i];
    geocodeCity(city, markerCluster);
  }

  // Listen for a cluster to be clicked
  google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    var markers = cluster.getMarkers();

    var content = '';
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];
      content += marker.title;
      content += ("<br>");
    }
    var infowindow = new google.maps.InfoWindow();
    infowindow.setPosition(cluster.getCenter());
    infowindow.close();
    infowindow.setContent(content);
    infowindow.open(map);
    google.maps.event.addListener(map, 'zoom_changed', function() {
      infowindow.close();
    });
  });

}

function geocodeCity(city, markerCluster) {
  geocoder.geocode({
    'address': city.city + " Niederösterreich"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      position = results[0].geometry.location;
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: "Ort: " + city.city + "\nBeitrag: " + city.title + "\nRed.: " + city.reporter + "\nDatum: " + city.storydate
      });
      // below code alway lies inside the loop
      markers.push(marker);
      markerCluster.addMarker(marker);
    } else {
      document.getElementById('info').innerHTML += city.city + " status=" + status + "<br>";
    }
  });
}
google.maps.event.addDomListener(window, "load", function() {
  initialize(cities);
});


var cities = [{
  city: "Sankt Polten",
  title: "title 0",
  reporter: "reporter 0",
  storydate: "November 25,2015 00:00:00"
}, {
  city: "Wiener Neustadt",
  title: "title 1",
  reporter: "reporter 1",
  storydate: "November 25, 2015 01:01:01"
}, {
  city: "Baden",
  title: "title 2",
  reporter: "reporter 2",
  storydate: "November 25,2015 02:02:02"
}, {
  city: "Klosterneuburg",
  title: "title 3",
  reporter: "reporter 3",
  storydate: "November 25, 2015 03:03:03"
}, {
  city: "Krems",
  title: "title 4",
  reporter: "reporter 4",
  storydate: "November 25,2015 04:04:04"
}, {
  city: "Amstetten",
  title: "title 5",
  reporter: "reporter 5",
  storydate: "November 25, 2015 05:05:05"
}, {
  city: "Modling",
  title: "title 6",
  reporter: "reporter 6",
  storydate: "November 25,2015 06:06:06"
}, {
  city: "Traiskirchen",
  title: "title 7",
  reporter: "reporter 7",
  storydate: "November 25, 2015 07:07:07"
}, {
  city: "Schwechat",
  title: "title 8",
  reporter: "reporter 8",
  storydate: "November 25,2015 08:08:08"
}, {
  city: "Ternitz",
  title: "title 9",
  reporter: "reporter 9",
  storydate: "November 25, 2015 09:09:09"
}, {
  city: "Stockerau",
  title: "title 10",
  reporter: "reporter 10",
  storydate: "November 25,2015 10:10:10"
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="info"></div>
<div id="map"></div>

GoogleMaps MarkerClusterer 信息窗口位置

GoogleMaps MarkerClusterer InfoWindow Position

javascript

google-maps

google-maps-api-3

marker

markerclusterer