Google Maps Marker Clusterer - 如何使用带有位置索引的 infoWindow答案

【问题标题】：Google Maps Marker Clusterer - How to use infoWindow with a location indexGoogle Maps Marker Clusterer - 如何使用带有位置索引的 infoWindow
【发布时间】：2016-04-27 13:36:06
【问题描述】：

我有一个谷歌地图，它下面有一个位置索引，所以用户可以点击一个位置名称，该位置的信息窗口就会在地图上弹出。

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

如何让 infoWindow 在正确的位置弹出？

这是我目前使用的代码：

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);
}

【问题讨论】：

你能做到infoWindow.setPosition(marker.getPosition())或infoWindow.setPosition(gmarkers[index].getPosition())
@duncan - infoWindow.setPosition(gmarkers[index].getPosition()) 完全按照我的意愿工作，谢谢。如果您将其添加为答案，我会将其标记为已接受。

标签： javascript google-maps google-maps-api-3 markerclusterer

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案2】：

信息窗口可以有自己的位置：

  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

【讨论】：

【解决方案3】：

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

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

【讨论】：