2012-03-07 3 views
1

Я получаю от своего webAPI массив json-объектов пользователей. Я могу отображать маркер для каждого пользователя правильно в своем местоположении, но я не могу работать, когда я нажимаю в каждом из них, чтобы получить щелкнутый элемент, я всегда получаю информацию из последней в списке.Google maps 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

Вы используете маркер, который определен за пределами функции щелчка.

, что вам нужно смотреть на это API Карт Google, и узнать, как получить щелкнул маркер идентификатор

маркер увеличивающиеся через петлю и ВСЕГДА будет последний маркер создан

+5

Если это так, используйте 'this' вместо 'marker', также попробуйте назначить id маркеру, а не его параметры (переданные в конструкторе) – slawekwin

+0

Это сработало, спасибо. Но это кажется действительно странным, потому что если вы посмотрите на карты google api docs: http://code.google.com/apis/maps/documentation/javascript/events.html, вы увидите, как хорошо работать с закрытием в части, называемой "** Использование закрытий в прослушивателях событий **" – SERPRO

+0

Причина, по которой он работает в документах, они вызывают отдельную функцию для создания прослушивателя событий, передавая соответствующий маркер, тем самым создавая закрытие. Вы просто создаете прослушиватель событий в цикле for, который всегда будет предоставлять доступ к последнему созданному маркеру. Использование this.id вместо marker.id - правильный ответ. – puckhead

2

It' никогда не поздно, так что, если я правильно понял, это будет aproach y.

При запуске маркеров добавьте их в массив после завершения их индивидуальной настройки.

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; 
     }) 
    } 
} 

Таким образом, у вас есть массив объектов Marker. Если вы хотите получить ссылку на конкретный экземпляр маркера, опция должна состоять в том, чтобы получить идентификатор щелкнутого маркера и искать его в «markersArray».

Если вы хотите, чтобы получить позицию (или любые другие свойства) маркеров, вы можете сделать что-то вроде этого:

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

Надеется, что это помогает!

Смежные вопросы