0

マップ上にいくつかのマーカーが（配列内に）あり、それぞれに指定したカスタムIDタグが付いています。

必要なもの：マーカーをクリックしたときに、そのIDを別の配列に追加したいと思います。

問題：Googleのマウスイベントにはターゲット属性がなく、位置のみが含まれているため、IDに直接アクセスできないようです。

位置を使用してそれに最も近いマーカーを見つけ、この方法でIDを返すことに頼る必要はありません。かなり複雑です。

すべての助けに感謝します

4

2 に答える 2

2

JavaScriptやクロージャと呼ばれる他の多くの言語の機能のおかげで、これは本当に簡単です。

マーカーを作成し、そのイベントリスナーを関数内に設定するコードを配置し、その特定のマーカーに必要なデータを使用して、マーカーごとにその関数を呼び出すだけです。例えば：

var places = [
    {
        id: 'one', lat: 1, lng: -1, name: 'First'
    },
    {
        id: 'two', lat: 2, lng: -2, name: 'Second'
    }
];

for( var i = 0;  i < places.length;  i++ ) {
    addPlace( places[i] );
}

function addPlace( place ) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng( place.lat, place.lng ),
        title: place.name
    });
    google.maps.event.addListener( 'click', function() {
        alert( 'Clicked ' + place.id + ': ' + place.name );
    });
}

このMapsAPIコードはテストしていませんが、コードの詳細は重要ではありません。理解しておくべき重要なことはplace、コードで使用されている変数です。これが重要な部分です。イベントリスナーがパラメータとしてaddPlace()持つ関数内にネストされているという理由だけで、その変数はイベントリスナー内でアクセス可能です。place

そのコードとこのようなコードの違いに注意してください。これは機能しません。

for( var i = 0;  i < places.length;  i++ ) {
    var place = places[i];
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng( place.lat, place.lng ),
        title: place.name
    });
    google.maps.event.addListener( 'click', function() {
        alert( 'Clicked ' + place.id + ': ' + place.name );
    });
}

2つの違いは、作業バージョンでは、すべてのコードをループ内に直接配置するのではなく、ループ本体をループから呼び出される別の関数に配置することだけです。毎回呼び出す関数にそのコードを含めると、クロージャーが作成されます。これにより、内部イベントリスナー関数が外部関数の変数を「参照」できるようになります。

クロージャーの優れている点は、同様の状況でクロージャーを使用できることです。これは、MapsAPIまたはAPIが使用するオブジェクトに固有のものではありません。たとえば、次のsetTimeout()ような呼び出しで、すでにそれらを使用していて、気付いていない場合もあります。

// Display an alert 'time' milliseconds after this function is called
function slowAlert( message, time ) {
    setTimeout( function() {
        alert( message );
    }, time );
}

slowAlert( 'Howdy!', 1000 );  // Wait a second and then say Howdy!

alert()コールバック関数内で呼び出しが行われる場合、関数setTimeout()のクロージャーを使用して、その関数に渡されslowAlert()た変数の値を取得します。message

于 2013-03-26T21:39:39.847 に答える
0

これは役立つはずです。マーカーオブジェクトにプロパティを追加customIdし、マーカーclickイベントでidプロパティを新しい配列に割り当てます。

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var bounds = new google.maps.LatLngBounds();
    map = new google.maps.Map($('#map')[0], options);
    var infoWindow = new google.maps.InfoWindow();
    //marker array
    var markers = [];
    //sencondary array to store markers that were clicked on.
    var markerIdArray = [];

    for (i = 0; i < 6; i++) {
        var lat = 38.713107 + Math.random();
        var lng = -90.42984 + Math.random();
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(lat, lng),
            customId: i //add a custom id to the marker
        });
        bounds.extend(marker.position);

        google.maps.event.addListener(marker, 'click', function () {
            //add the id to the other array.
            markerIdArray.push(this.customId);
            //log the content of the array to the console.
            console.log(markerIdArray); 
        });
        markers.push(marker);
    }    
    map.fitBounds(bounds);
}

これが実際の例です。

于 2013-03-26T21:40:21.223 に答える