javascript - Google Maps v3マーカーイベント

javascript google-maps-api-3

forループと個別の関数を使用してマーカーのコレクションを追加するマップがあります

function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

...

        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }
}

function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (pointer + 1)).css('background', 'red');
        });


        pointer++;
    }


ご覧のとおり、クリックされたマーカーに応じて異なるアクションを実行するクリックイベントを追加しようとしています(または同じアクションですが、別のテーブル行に対して)。ただし、機能しません。デバッグでは、クリックイベントが新しいforループではなく各forループに置き換えられているように見えるため、常に最後のテーブル行(この場合は4番目)の背景色が変更されます。

どんな助けも大歓迎です。

クリス

編集:ここにすべての私のコードがあります

<script type="text/javascript">

    var pointerArray = new Array();
    var map;
    var lat;
    var long;
    var pointer = 0;

    $(document).ready(function () {

        initialize();

    });

    function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

        var bounds = new google.maps.LatLngBounds(); ;
        for (i = 0; i < pointerArray.length; i++) {
            bounds.extend(new google.maps.LatLng(pointerArray[i].lat, pointerArray[i].long));
        }

        // set map options
        var myOptions = {
            zoom: 16,
            center: bounds.getCenter(), /* Center on the group here */
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            streetViewControl: false,
            scaleControl: false,
            rotateControl: false
        };

        // Generate map to draw on
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.fitBounds(bounds);

        // my position
        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }

    }


    function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        var currPointer = pointer;
        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red');
        });


        pointer++;
    }


    function pointers(title, lat, long) {
        this.title = title;
        this.lat = lat;
        this.long = long;
    }




</script>


解決済み:)

この記事はここにあります:http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

基本的に、クリックイベント内の関数を外部関数に移動する必要があり、外部関数が目的の効果を持つ関数を返しました。これは、マップだけでなく、一般的なJavascriptの問題のようです。私の未経験だけ!

これが皆さんのお役に立てば幸いです。
答え
解決済み:)

この記事はここにあります:http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

基本的に、クリックイベント内の関数を外部関数に移動する必要があり、外部関数が目的の効果を持つ関数を返しました。これは、マップだけでなく、一般的なJavascriptの問題のようです。私の未経験だけ!

これが皆さんのお役に立てば幸いです。
関連記事

javascript - プログラムでテキストボックスの値を変更するとIE8が変更イベントを起動する

javascript - JCropがJavaScriptコードで機能しない

javascript - NodeJS用のRDF / XML JavaScriptコンバーターへのN-triples

javascript - javascript関数がオブジェクトの場合、なぜこれが機能しないのですか

javascript - ステートメントとImg問題について

javascript - node.jsのhttp.requestからブラウザに応答を送信する方法は?

javascript - FacebookのJS SDKから「アクション」で壁に投稿する方法

javascript - JavaScriptで画像を回転しているときの奇妙な配置の問題

javascript - ブラウザのブレットグラフ-d3.jsの代替? (ブラウザのサポートが良好)[終了]

javascript - jsを使用してテキストボックスのサイズを動的に設定する