Передача дополнительной информации в Google Maps InfoWindow

Question

Я пытаюсь передать больше информации в InfoWindow карты Google Maps, но почему-то это не работает. Должно быть, это просто глупость, но я потратил на это часы и не могу ее найти.

Мои данные хранятся как:

res[i].id
res[i].name
res[i].date

и т.д.

А потом я вывожу это с:

var marker = new google.maps.Marker ({ позиция: новая

google.maps.LatLng(res[i].position.lat,res[i].position.long),
                            title:'',
                            orderid:res[i].id,
                            map:map,
                            icon: icon,
                        });    

google.maps.event.addListener(marker, "click", (function(id) {
    return function() {
    var contentString = '<div><b>Order ID:</b> '+id+'
                         <br><b>Name:</b> '+res[i].name+'</div>'
                         <br><b>Date:</b> '+res[i].date+'</div>';
    infowindow.setContent(contentString);
    infowindow.open(map, this);
    }
})(res[i].id));

id выводит нормально, когда я использую id, но я не знаю, как передать другие переменные .. По какой-то причине имя и дата всегда показывают Cannot read property 'XXX' of undefined

Что я делаю не так? Обратите внимание, что на этой карте может быть много маркеров, она находится в цикле for.

Answer 1

У вас есть два варианта:

1. получить закрытие функции на res[i], чтобы вы могли получить доступ к ее свойствам в функции обратного вызова обработчика события "click":

   google.maps.event.addListener(marker, "click", (function(res) {
     return function() {
           var contentString = '<div><b>Order ID:</b> '+res.id+
                    '<br><b>Name:</b> '+res.name+'</div>'+
                    '<br><b>Date:</b> '+res.date+'</div>';
       infowindow.setContent(contentString);
       infowindow.open(map, this);
     }
   })(res[i]));
   

подтверждение концепции скрипки

2. добавьте все свойства, которые вы должны использовать внутри функции обработчика события "click", к маркеру, а затем получите к ним доступ оттуда (используя this внутри функции "click" для ссылки на маркер). Это имеет то преимущество, что позволяет свойствам динамически изменяться (хотя, не делая каких-либо действий для динамического обновления InfoWindow, вы не увидите этого, пока не нажмете на маркер снова). В настоящее время они всегда будут первым установленным значением (в ответе, который изначально создает маркер).

   for (var i = 0, len = res.length; i < len; i++) {
     //Do we have this marker already?
     if (markerStore.hasOwnProperty(res[i].id)) {
       markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
       markerStore[res[i].id].timeStamp = timeStamp;
       // update its properties from the response
       markerStore[res[i].id].name = res[i].name;
       markerStore[res[i].id].date = res[i].date;
     } else {
       // create one
       var marker = new google.maps.Marker(res[i]);
       marker.setMap(map);
       marker.setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
       google.maps.event.addListener(marker, "click", function() {
         var contentString = '<div><b>Order ID:</b> '+this.id+
           '<br><b>Name:</b> '+this.name+'</div>'+
           '<br><b>Date:</b> '+this.date+'</div>';
         infowindow.setContent(contentString);
         infowindow.open(map, this);
       });
       markerStore[res[i].id] = marker;
       markerStore[res[i].id].timeStamp = timeStamp;
     }
   }
   

подтверждение концепции скрипки

Answer 2

Нашли решение:

google.maps.event.addListener(marker, 'click', (function(marker,i){
        return function(){
        infoWindow.setContent(infoWindowContent[i]);
        infoWindow.open(map, marker);
        }
})(marker,i));

function getInfoWindowDetails(location){
                            var contentString = '<div id="content" style="width:270px;height:100px">' +
                                                '<h3 id="firstHeading" class="firstHeading">' + location.name + '</h3>'+
                                                '<div id="bodyContent">'+
                                                    '<div style="float:left;width:100%">'+ location.status + '</div>'+
                                                '</div>'+
                                            '</div>';
                            return contentString;
                        }

Надеюсь, это кому-нибудь поможет!