Question

我正在尝试了解如何在点击Google Maps markerclusterer标记时显示自定义数据，但无法在任何地方找到此文档。

我的markerclusterer代码看起来像这样但是我在标记上捕获click事件的尝试不起作用：

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
  'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);

function refreshMap() {
    if (markerClusterer) {
      markerClusterer.clearMarkers();
    }
    var markers = [];
    var markerImage = new google.maps.MarkerImage(imageUrl,
      new google.maps.Size(24, 32));
      /*
    for (var i = 0; i < 1000; ++i) {
      var latLng = new google.maps.LatLng(data.photos[i].latitude,
          data.photos[i].longitude)
      var marker = new google.maps.Marker({
       position: latLng,
       icon: markerImage
      });
      markers.push(marker);
    }
    */
    for (var i = 0; i < numItemsToShow; ++i) {
      var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
      var marker = new google.maps.Marker({
       position: latLng,
       icon: markerImage
      });
      markers.push(marker);
    }
    var zoom = parseInt(document.getElementById('zoom').value, 10);
    var size = parseInt(document.getElementById('size').value, 10);
    var style = parseInt(document.getElementById('style').value, 10);
    zoom = zoom == -1 ? null : zoom;
    size = size == -1 ? null : size;
    style = style == -1 ? null: style;


    markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: zoom,
      gridSize: size,
      styles: styles[style]
    });
}

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(39.91, 116.38),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}]
        styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},
            {"featureType":"landscape","stylers":[{"color":"#efefef"}]},
            {"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},
            {"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},
            {"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},
            {"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},
            {"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},
            {"featureType":"road"},
            {"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},
            {"featureType":"road","stylers":[{"lightness":20}]}]
    });
    var refresh = document.getElementById('refresh');
    google.maps.event.addDomListener(refresh, 'click', refreshMap);
    var clear = document.getElementById('clear');
    google.maps.event.addDomListener(clear, 'click', clearClusters);

    google.maps.event.addListener(markerClusterer, 'click', function () {
      // do something with this marker ...
      this.setTitle('I am clicked');
    });

    refreshMap();
}

function clearClusters(e) {
    e.preventDefault();
    e.stopPropagation();
    markerClusterer.clearMarkers();
}

Answer 1

这对我有用（当你将鼠标悬停在群集图标上时会打开一个信息窗口，如果你单击群集图标，默认行为是缩放到群集边界，这使得很难看到工具提示的变化/群集图标上的标题）：

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
  // do something with this cluster ...
  infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
  infoWindow.setPosition(cluster.getCenter());
  infoWindow.open(map);
});

在markercluster中单击Google Maps标记时显示数据

1 个答案: