2012-03-07 110 views
1

我從我的webAPI獲取用戶的json對象數組。我可以在每個用戶的位置上正確顯示標記,但當我點擊每個用戶以獲取點擊項目時,我無法開始工作,我總是從列表中的最後一個獲取信息。谷歌地圖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'相同的數字? – 2012-03-07 11:59:51

+0

我也這麼認爲..但我嘗試了其他方法..仍然得到了相同的結果。 – SERPRO 2012-03-07 12:01:27

回答

2

您正在使用的標記是在您之外定義的單擊函數。

你需要看的是谷歌地圖的API,並找出如何讓點擊標記ID

標記通過循環遞增,並且將永遠是最後一個標記創建

+5

如果是這種情況,請使用'this'而不是'marker',也可以嘗試將id分配給標記,而不是其選項(在構造函數中傳遞) – slawekwin 2012-03-07 12:07:06

+0

工作正常,謝謝。但它看起來很奇怪,因爲如果你看看谷歌地圖api文檔:http://code.google.com/apis/maps/documentation/javascript/events.html,你可以看到如何工作罰款與封閉的部分叫「**在事件監聽器中使用閉包**」 – SERPRO 2012-03-07 12:12:50

+0

它在文檔中起作用的原因是它們正在調用一個獨立的函數來創建事件監聽器,傳遞適當的標記,從而創建閉包。您只需在for循環中創建事件偵聽器,該循環將始終訪問創建的最後一個標記。使用this.id代替marker.id是正確的答案。 – puckhead 2012-03-07 14:05:46

2

It'什麼不要太晚,所以,如果我理解正確的話,這是我們所要做的。

當對標記進行例化時,在完成各自的設置後將它們添加到數組中。

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並在「markersArray」中查找它。

如果你想要得到的位置(或任何其他屬性)的標記,你可以做這樣的事情:

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

希望這有助於!