Справка по Infowindow на Google Maps API 3 - PullRequest
Новая
       12

Справка по Infowindow на Google Maps API 3

2 голосов
/ 20 октября 2010

Возникла та же проблема, что и у других на этом веб-сайте, где он отображает только информацию о последнем информационном окне маркера во всех маркерах. Кажется, не может решить эту проблему ни с одним из приведенных решений. Кроме того, последний из моих маркеров вообще не отображает информационное окно. 

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="data2.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  google.load('maps', '3', {
    other_params: 'sensor=false'
  });
  google.setOnLoadCallback(initialize);

  function initialize() {

var center = new google.maps.LatLng(55.4419, -4.1419);

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
      var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
      var theTitle = dataPhoto.address;
      var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';



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



    var thisIcon = 'markers/image.png';


                for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);});
      } 


      var marker = new google.maps.Marker({
        position: latLng,
        clickable: true,
        title: theTitle,
        icon: thisIcon,
      });

      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);


  }


</script>

Любая помощь высоко ценится!

Ответы [ 3 ]

5 голосов
/ 21 октября 2010

Я не проверял это, но оно должно работать - также, пожалуйста, посмотрите: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

<script src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="data2.json">
</script>
<script type="text/javascript" src="js/markerclusterer.js">
</script>
<script type="text/javascript">
    google.load('maps', '3', {
        other_params: 'sensor=false'
    });
    google.setOnLoadCallback(initialize);

    function initialize(){

        var center = new google.maps.LatLng(55.4419, -4.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        var markers = [];
        for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
            var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
            var theTitle = dataPhoto.address;
            var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
            var thisIcon = 'markers/image.png';
            var marker = new google.maps.Marker({
                position: latLng,
                clickable: true,
                title: theTitle,
                icon: thisIcon,
            });

            attachIWindow(contentString, marker);


            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);


    }

    function attachIWindow(content, marker){


        var infowindow = new google.maps.InfoWindow({
            content: content,

        });
        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map, marker);
        });
    }
</script>
2 голосов
/ 28 февраля 2014

Мы можем использовать замыкания для решения этой проблемы

Используйте приведенный ниже фрагмент кода, чтобы добавить информационное окно к маркер 

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

Чтобы увидеть рабочий образец, см. здесь

0 голосов
/ 20 октября 2010

Если я правильно понял, тогда, пожалуйста, взгляните на замыкания и постарайтесь понять их правильно. Тогда произойдет волшебство javascript!

...