2012-03-07 16 views
1

私は自分のwebAPIからjsonオブジェクトの配列を取得しています。私は自分の位置に各ユーザーのマーカーを正しく表示できますが、クリックしたアイテムを取得するためにそれぞれをクリックしても機能しません。常にリストの最後から情報を取得します。GoogleマップAPI v3、クリックマーカーを取得できません

これは私が地図上にそれらを置くために使用するコードです:

var markers = []; 

for (var i = 0; i < size; i++) { 
    var zIndex = membersList[i].type; 
    var latLng = new google.maps.LatLng(membersList[i].latitude, 
      membersList[i].longitude); 
    var marker = new google.maps.Marker({ 
     'position' : latLng, 
     'shadow' : null, 
     'zIndex' : zIndex, 
     'title' : membersList[i].username, 
     'id'  : i, 
     'icon' : markerImage[membersList[i].type] 
    }); 

    google.maps.event.addListener(marker, 'click', function() 
    { 
     console.log(marker.id); 
     var clicked = membersList[marker.id]; 
     var mType = ['', 'Couple', 'Male', 'Female']; 
     var textType = mType[clicked.type]; 
     var userName = clicked.username; 
     $(this).simpledialog2({ 
      mode: 'button', 
      headerText: "OPTIONS", 
      headerClose: true, 
      buttonPrompt: userName+ ' ('+textType+')', 
      buttons : { 
       'PROFILE': { 
        click: function() { 
         toUser = userName; 
         loadPage('profile'); 
        }, 
        icon: "info" 
       }, 
       'MESSAGE': { 
        click: function() { 
         toUser = userName; 
         loadPage('compose'); 
        }, 
        icon: "star", 
       } 
      } 
     }); 
    }); 

    markers.push(marker); 
} 

markerCluster.addMarkers(markers); 

私はいくつかのズームレベルで地図上のグループ化されたマーカーを表示するmarkerClustererを使用していますちなみに。

+0

私には閉鎖の問題のような音がします。 'console.log'行は何を出力しますか? 'markers.length'と同じ数字ですか? –

+0

私はそれも考えていますが、私は他の方法を試してみましたが、まだ同じ結果を得ています。 – SERPRO

答えて

2

あなたはあなたの外で定義されたマーカーを使用しています。 GoogleマップのAPIであるを見て必要なものを

、および

マーカーがループを通ってインクリメントされ、常に最後のマーカーが

+5

これは、 'marker'の代わりに 'this'を使用する場合、そのオプション(コンストラクタで渡される)ではなく、idにマーカーを代入してみてください。 – slawekwin

+0

これはうまくいきました。しかし、それは本当に変わったように見えるので、もしあなたがGoogleマップを見れば、api docs:http://code.google.com/apis/maps/documentation/javascript/events.htmlあなたは、 "**イベントリスナーでのクロージャの使用**" – SERPRO

+0

イベントリスナーを作成するために別の関数を呼び出して、適切なマーカーを渡してクロージャを作成する理由は、ドキュメント内で動作する理由です。 forループにイベントリスナーを作成するだけで、最後に作成されたマーカーに常にアクセスできます。 marker.idの代わりにthis.idを使用するのが正解です。 – puckhead

2

It'を作成されますクリックしたマーカーIDを取得する方法を見つけます遅すぎることはありません。私が正しく理解していれば、これが成功するでしょう。

マーカーを強調する場合は、個々の設定が完了した後でマーカーを配列に追加します。

var MySiteWithMap = { 
    markersArray : [], //Markers array 
    map : {}, //Map object instance 
    init : function() { 

     var mapCanvas = document.getElementById("map"); 
     var mapOptions = { 
     center : new google.maps.LatLng(-26.816667, -65.216667), 
     zoom : 11 
     }; 
     this.map = new google.maps.Map(mapCanvas,mapOptions); 

     /* 
     The following is used to get the Lat and Lng where the user clicks. 
     It may be useful to store the last coordinate where the user clicked. 
     */ 
     this.map.addListener("click", function(event){ 
      var lat = event.latLng.lat(); 
      var lng = event.latLng.lng(); 
      console.log("Lat: " + lat + " Lng: " + lng); 
     }); 

     MySiteWithMap.initMarkers(); 

    }, 
    initMarkers : function(url){ 
     $.get(url).done(function(result){ 
      var lat; 
      var lng; 
      $.each(result,function(index,element){ 
       lat = element.Latitud; 
       lng = element.Longitud; 

       var position = new google.maps.LatLng(lat,lng); 

       var marker = new google.maps.Marker({ 
        position : position, 
        map : _this.map, 
        id : element.id //Supposing it's a primary key from the DB or some other unique id. 
       }); 
       marker.addListener('click',function(){ 
        console.log(this.id) 
       }); 

       Mapas.markersArray[marker.id] = marker; 
     }) 
    } 
} 

このようにすると、マーカーオブジェクトの配列が得られます。特定のマーカーインスタンスへの参照を取得する場合は、クリックしたマーカーのIDを取得し、「マーカー配列」でそのマーカーを探します。

あなたはマーカーの位置(またはその他のプロパティ)を取得したい場合、あなたはこのような何かを行うことができます。

console.log(MySiteWithMap.markersArray[123].position) 

は、この情報がお役に立てば幸い!

関連する問題