Как отобразить контент в информационном окне, специфичном для маркера? - PullRequest
Новая
       5

Как отобразить контент в информационном окне, специфичном для маркера?

0 голосов
/ 09 марта 2012

Я создал карты Google (api v3) с количеством маркеров в зависимости от результатов поиска. Когда я нажимаю на маркер, он открывает информационное окно. Каков наилучший способ, чтобы это информационное окно показывало информацию, связанную с его маркером? Информация, относящаяся ко всем маркерам, находится в объекте json, который я получаю по запросу ajax. 

for (i=0; i < result.point.length; i++) {
                    var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);                                    
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString()
                        //map: map
                    });
                    markersArray.push(marker);

                    var infowindow = new google.maps.InfoWindow({
                        content: 'specific information associated to the marker clicked'
                    });

                    google.maps.event.addListener(markersArray[i], 'click', function(event) {
                        infowindow.open(map, this);
                    });

Ответы [ 5 ]

6 голосов
/ 09 марта 2012

Создать только 1 информационное окно, как указано выше.

Хранилище содержимого внутри маркера: 

var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString(),
                        //set your content here
                        content:'your specific content'
                        //map: map
                    });

Открытие окна: 

google.maps.event.addListener(markersArray[i], 'click', function(event) {
                        infoWindow.setContent(this.content);
                        infowindow.open(map, this);
                    });
2 голосов
/ 09 марта 2012

Во-первых, вы должны переместить создание информационного окна из цикла for.

Затем измените место, где вы прикрепляете событие click к этому: 

google.maps.event.addListener(markersArray[i], 'click', function(content) {
    return function(event){
        infowindow.setContent(content);
        infowindow.open(map, this);
    }
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));

Вы хотитеиспользуйте этот вместо маркер . this будет ссылаться на объект, на котором произошло событие, а marker будет ссылаться на последний созданный маркер.

0 голосов
/ 29 мая 2013

Попробуйте, это работает, я уже тестировал 

// Add markers

   for (i=0; i < result.point.length; i++) {
                    var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);                                    
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: i.toString()
                        //map: map
                    });                    

    // marker info start
                    var infowindow = new google.maps.InfoWindow();

    (function (marker, result.point[i]) {
                    // add click event
                    google.maps.event.addListener(marker,  'click',  function() {
                    var infoContent: "specific information associated to the marker clicked"
                    });
        infoWindow.setContent(infoContent);
                        infowindow.open(map, marker);
                    });

    // selected marker 4 infowindow 
    (marker, result.point[i]);

       markersArray.push(marker);
      }
0 голосов
/ 09 марта 2012

Не совсем уверен, что вы пытаетесь сделать. Где / какой контент вы пытаетесь загрузить? 

google.maps.event.addListener(marker, 'click', (function(event, index) {
  return function(){
  infowindow.content = markersArray[index].yourcontent;
  // or
  infowindow.content = yourcontentarray[index];
  infowindow.open(map,this);
  }
})(marker,i));

Убедитесь, что вы объявили свои переменные маркера и информационного окна вне функции.

0 голосов
/ 09 марта 2012

У вас есть несколько опечаток в вашем примере (proint) В верхней части цикла: 

for (i=0; i < result.point.length; i++) {
   var info_window_content = result.point[i].Latitude + '<br />';
   info_window_content += result.point[i].Longitue + '<br />';
   // etc for any value in you json object
   // create your marker as is.
     ...
  var infowindow = new google.maps.InfoWindow({
                    content: info_window_content
                });
  // etc, etc.

Вам нужно добавить EventListener для каждого маркера, как вы делаете.Я не вижу никаких проблем с этим.За исключением того, что я использовал бы infoWindow.open (map, marker) против этого.

Вероятно, есть более эффективный способ сделать это, то есть после infoWindow.open ();infoWindow.setContent (info_window_content)

...