1

infoBubble.js を使用するマップがあります。

このマップには、繰り返し処理する場所の配列があります。

カスタム アイコンをクリックすると infoBubble がポップアップするはずですが、何らかの理由で最初のデータ項目しか開きません。

なぜそれが起こるのかについて誰かが考えを持っていますか?

ここでコードを開発しました。

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;

    }
}
4

1 に答える 1

2

これが実際の例です。私はあなたが持っていたいくつかの配列を取り出しました（それらが何のためにあるのか完全にはわかりませんでした.投稿したスニペットだけでエラーが発生していました）. 大きな違いは、マーカーを作成するための別の関数を作成したことです。これは主に、クリック イベントのスコープを互いに分離しておくために行われました。これは、クリック イベントが常に最後のイベントをトリガーすることは、スコープが適切に分離されていないことを示しているためです。

具体的には、イベント関数がマーカーと infoBubble の値をオーバーライドし続け、イベント リスナーが最初にリスナーをアタッチしたときの値ではなく、これらの変数の現在の値を参照していると私は信じています。イベントのスコープを維持するために別の関数呼び出しを行うことは、最もクリーンなソリューションだと思います。

于 2012-11-19T21:42:02.120 に答える