Попытка отобразить данные InfoWindow из JSON на нескольких маркерах - PullRequest
Новая
       6

Попытка отобразить данные InfoWindow из JSON на нескольких маркерах

1 голос
/ 28 февраля 2011

У меня есть несколько маркеров, загружаемых из файла JSON в API Google Maps v3. Однако он загружает только последнюю запись JSON в информационное окно карты на последнем маркере. Другие маркеры не отображают информационное окно при нажатии.

Я нашел следующие похожие посты, но все еще не могу заставить это работать.

.. 3979486 / InfoWindow-помощь-на-Google-картах-Апи-3

.. 2357323 / пытающиеся к затруднительному многодисковым infowindows к нескольким-маркерам-на-Google-карта-и-файль

Я предполагаю, что это как-то связано с расположением addListener?

Вот что я получил: 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>


<script type="text/javascript">
function initialize() {
  var myLatlng = new google.maps.LatLng(39.632906,-106.524591);
  var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeControl: true,
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     };

  var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);

    var url = "eventdata.json";
      $.getJSON(url,
        function(data){ 
              $.each(data.markers, function(i,markers){

                  var mylati = data.markers[i].lati;
                  var mylong = data.markers[i].long;
                  var mytitle = data.markers[i].title;
                  var myaddress = data.markers[i].address;
                  var myhtml = data.markers[i].html;

    var mycontent = "<div class='infowin'><h3>" + mytitle + "</h3>" + "<h4>"
    + myaddress + "</h4>" + myhtml + "</div>";

    var myLatlng = new google.maps.LatLng(parseFloat(mylati),parseFloat(mylong));



                <!--Load Event Markers-->
                    var markers = [];
                    for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
                      var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
                      var theTitle = dataMarkers.title;
                      var marker = new google.maps.Marker({
                        position: latLng,
                        clickable: true,
                        title: theTitle,
                      });
                      markers.push(marker);
                    }

                        var markerClusterer = new MarkerClusterer(map, markers, {
                          maxZoom: 15,
                          gridSize: 30,
                        });

                    var infowindow = new google.maps.InfoWindow({
                        content: mycontent
                    });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });




       });
    });

    }

</script>

Любая помощь очень ценится

Ответы [ 2 ]

1 голос
/ 28 февраля 2011

Пожалуйста, посмотрите на это и попытайтесь понять замыкания

0 голосов
/ 03 марта 2011

Прочитайте замыкания и выясните это ... 

        var map = new google.maps.Map(document.getElementById("map_canvas"), options);


                var markers = [];
                for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) {
                  var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng);
                  var marker = new google.maps.Marker({
                    position: latLng,
                    title: dataMarkers.title,
                    date: dataMarkers.date,
                    time: dataMarkers.time,
                    desc: dataMarkers.desc,
                    img: dataMarkers.img,
                    add: dataMarkers.address,
                    cat: dataMarkers.cat,
                    map: map
                  });


                var infowindow = new google.maps.InfoWindow({
                        content: " "
                      });
                      google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'"/>' +
                                              '<div class="mapTitle">'+this.title+'</div>' + 
                                              '<div class="mapHead">Date: <div class="mapInfo">'+this.date+'</div>' +
                                              '<div class="mapHead">Time: <div class="mapInfo">'+this.time+'</div>' +
                                              '<p>'+this.desc+'</p></div>');
                        infowindow.open(map, this);
                      });

                  markers.push(marker);
                }


            var markerClusterer = new MarkerClusterer(map, markers, {
              maxZoom: 15,
              gridSize: 50
            });

}

...