Google Maps Marker Clusterer — как использовать infoWindow с индексом местоположения

У меня есть карта Google, которая использует индекс местоположения под ней, поэтому пользователи могут щелкнуть имя местоположения, и на карте появится информационное окно для этого местоположения.

Я также использую 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);
}

google-maps javascript google-maps-api-3 markerclusterer
person EpF    schedule 27.04.2016    source источник
comment
Не могли бы вы сделать infoWindow.setPosition(marker.getPosition()) или infoWindow.setPosition(gmarkers[index].getPosition())   -  person duncan    schedule 27.04.2016
comment
@duncan - infoWindow.setPosition(gmarkers[index].getPosition()) работает именно так, как я хочу, спасибо. Если вы добавите это как ответ, я отмечу его как принятый.   -  person EpF    schedule 28.04.2016

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете просто сделать:

infoWindow.setPosition(gmarkers[index].getPosition());
person duncan    schedule 29.04.2016

arrow_upward
0
arrow_downward

Информационному окну может быть присвоено собственное положение:

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

Вы также можете вызвать setPosition для InfoWindow, чтобы переместить его программно.

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

person Nathan Hase    schedule 27.04.2016

arrow_upward
0
arrow_downward

Один из вариантов — добавить маркер на карту перед открытием информационного окна.

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

доказательство концепции скрипки

person geocodezip    schedule 27.04.2016