Google Maps API v3 массив infoBubble не работает

У меня есть карта, использующая infoBubble.js.

На этой карте есть множество мест, которые я перебираю.

Информационный пузырь должен появляться при нажатии пользовательского значка, но по какой-то причине он открывает только первый элемент данных.

Кто-нибудь знает, почему это может произойти?

Я разработал код для него здесь;

var arrMarkers = [
    ['Santiago de Cuba', 20.040450354169483, -75.8331298828125],
    ['Las Tunas', 20.97682772467435, -76.9482421875],
    ['Camaguey', 21.39681937408218, -77.9205322265625],
    ['Playa Santa Lucia', 21.555284406923192, -77.0526123046875],
    ['Santa Clara', 22.421184710331854, -79.9639892578125],
    ['Cienfuegos', 22.161970614367977, -80.4473876953125],
    ['Havana', 23.12520549860231, -82.3919677734375],
    ['San Cristobel', 22.730590425493833, -83.045654296875],
    ['Pinar del Rio', 22.43641760076311, -83.69384765625]
];

var arrInfoWindowsCuba = [];

var arrInfoWindows = [];
arrMarkers[i] = marker;

function init() {

    var mapCenter = new google.maps.LatLng(21.616579336740603, -78.892822265625);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 7,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    var image = '/wp-content/themes/Shootcuba/images/map-icon.png';

    for (i = 0; i < arrMarkers.length; i++) {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(arrMarkers[i][1], arrMarkers[i][2]),
            icon: image
        });


        var infoBubble = new InfoBubble({
            content: '<div class="phoneytext">' + arrMarkers[i][0] + '<div class="left-col2"></div></div>',
            boxClass: 'info-box',
            alignBottom: true,
            pixelOffset: new google.maps.Size(-150, -40),
            maxWidth: 300,
            padding: 0,
            closeBoxMargin: '0px',
            borderColor: '#ffffff',
            borderRadius: '0',
            maxWidth: 535,
            disableAutoPan: false,
            hideCloseButton: false,
            backgroundClassName: 'phoney'
        });
        google.maps.event.addListener(marker, 'click', function () {
            infoBubble.open(map, marker, i);
            console.log(arrMarkers);
        });

        arrMarkers[i] = marker;
        arrInfoWindowsCuba[i] = infoBubble;

    }
}

javascript google-maps-api-3 infobubble
person M dunbavan    schedule 19.11.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот рабочий пример. Я вынул несколько массивов, которые у вас были (я не был полностью уверен, для чего они все нужны, и они вызывали ошибки только в опубликованном вами фрагменте), но в остальном это вполне соответствует тому, что вы делали. Большая разница в том, что я сделал отдельную функцию для создания маркеров. В основном это было сделано для того, чтобы область событий щелчка была отделена друг от друга, поскольку событие щелчка, всегда запускающее последнее событие, указывает мне на то, что области должным образом не разделены.

В частности, я считаю, что происходило то, что функция события, которую вы продолжали переопределять значения для маркера и infoBubble, и прослушиватель событий будет ссылаться на текущие значения этих переменных, а не значения, когда вы впервые прикрепляете прослушиватель. Создание отдельного вызова функции для сохранения области действия событий кажется мне самым чистым решением.

person Bubbles    schedule 19.11.2012
comment
БЛЕСТЯЩИЙ! Да, вчера вечером я еще раз посмотрел, и это сработало, но оно продолжало возвращаться к первому. Я знал, что это было правильно, это всего лишь небольшая деталь, которую следует учитывать при написании областей действия для событий щелчка маркера и функции создания маркера. Спасибо за внимание к этому. Всегда помогают более простые способы написания js. - person M dunbavan; 20.11.2012