首页 > 编程语言> > javascript-GoogleMaps MarkerClusterer InfoWindow位置

javascript-GoogleMaps MarkerClusterer InfoWindow位置

2019-10-27 17:36:16 作者：互联网

我对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>

解决方法:

您的MVCObject没有任何属性.根据documentation,如果您将可选的anchor参数传递到函数.open中,则它必须公开LatLng position属性,而您必须不公开(因为它没有任何属性,因此不能公开任何属性).

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>

标签：google-maps,google-maps-api-3,marker,markerclusterer,javascript
来源： https://codeday.me/bug/20191027/1946028.html