Google Maps Marker Clusterer - 如何将 infoWindow 与位置索引一起使用

Question

我有一个 google 使用的地图，其下方有一个位置索引，因此用户可以单击位置名称，地图上会弹出该位置的信息窗口。

我也在使用 Marker Clusterer v3。目前，单击索引中的项目会导致集群中项目的信息窗口在地图的左上角弹出。

如何让信息窗口在正确的位置弹出？

这是我目前使用的代码：

var gmarkers = [];
var map;
var infoWindow;

(function( $ ) {
    'use strict';

    $(function () {
        initGmap();
        var openLink = $('.members-list span');
        $(openLink).click(function () {
            var index = $(this).data('markerIndex');
            infoWindow.setContent(gmarkers[index].infWinCont);
            infoWindow.open(map, gmarkers[index]);
        });
     });

})(jQuery);

function initGmap()
{
    var mapCanvas = document.getElementById('map');
    var mapLatlng = new google.maps.LatLng(50.5692828655824, 10.01953125);
    var mapOptions = {
      center: mapLatlng,
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapCanvas, mapOptions);
    map.minZoom = 3;
    infoWindow = new google.maps.InfoWindow();
    // mapData and mapDataCount are loaded from a separate file
    for (var i = 0; i < mapDataCount; i++) {
        var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lon);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            infWinCont: mapData[i].infWin,
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(marker.infWinCont);
                infoWindow.open(map, marker);
            };
        })(marker, i));
        gmarkers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, gmarkers);
}

Answer 1

InfoWindow 可以指定自己的位置：

  var latlng = {lat: -25.363, lng: 131.044};
  var infowindow = new google.maps.InfoWindow({
    position: latlng,
    content: 'content in here'
  });

您也可以调用 InfoWindow 上的 setPosition 以编程方式移动它。

https://developers.google.com/maps/documentation/javascript/infowindows#open

Answer 2

一个选项是在打开信息窗口之前将标记添加到地图

var index = $(this).data('markerIndex');
gmarkers[index].setMap(map);
// center and zoom on the marker so it remains unclustered
map.setCenter(gmarkers[index].getPosition());
map.setZoom(18);
// programmatically "clicking" on the marker opens the infowindow.
google.maps.event.trigger(gmarkers[index], 'click');

proof of concept fiddle

Answer 3

你可以这样做：

infoWindow.setPosition(gmarkers[index].getPosition());

Google Maps Marker Clusterer - 如何将 infoWindow 与位置索引一起使用

Google Maps Marker Clusterer - How to use infoWindow with a location index

javascript

google-maps

google-maps-api-3

markerclusterer