繁体   English   中英

Google Maps API V3-信息框和循环问题

[英]Google Maps API V3 - Issue with infobox and loop

我正在使用Google Maps API V3,并且信息框出现问题。 我的代码仅显示最后一个标记的信息框。 我不知道为什么。 可能是关闭问题,但不确定。

这是我的代码:

var directionsDisplay;
var directionsService;
var info;
var i;

function initialize() {
        var markers=[];
        var GeocoderOptions;
        var myGeocoder;
        var temp;
        info = [
        ['57 Avenue Joseph Kessel 78180 Montigny-le-Bretonneux','Paul VERLAINE','Testinfo'],
        ['24 Rue du champ d avoine 78180 Mintigny-le-Bretonneux','Charles PEGUY','Testinfo'],
        ['21 Rue du Poirier Saint Martin 78180 Mintigny-le-Bretonneux','Maurice GENEVOIX','Testinfo'],
        ['13 Rue des Pyrenees 78180 Montigny-le-Bretonneux','Neil COSAQUE','Testinfo'],
        ['14 Rue des Pyrenees 78180 Montigny-le-Bretonneux','Louise THEVENOUX','Testinfo'],
        ['9 Rue des Bleuets 78180 Montigny-le-Bretonneux','Melanie JARNET','Testinfo'],
        ['10 Rue des Bleuets 78180 Montigny-le-Bretonneux','Antony JARNET','Testinfo'],
        ['30 Rue de la Republique 78180 Montigny-le-Bretonneux','Erin BARTOUT','Testinfo'],
        ['31 Rue de la Republique 78180 Montigny-le-Bretonneux','Fabien BARTOUT','Testinfo'],
        ['29 Rue de la Republique 78180 Montigny-le-Bretonneux','Christophe BARTOUT','Testinfo']
        ];
        var pinImage;
        var marker;
        var loc =new google.maps.LatLng(48.772, 2.028);
        var mapOptions = {
          center: loc,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionsPanel'));

        myGeocoder = new google.maps.Geocoder();

        for(i=0;i<info.length;i++){
            GeocoderOptions={
                'address' : info[i][0],
                'region':'FR'       
            };
            myGeocoder.geocode( GeocoderOptions, function(i){
            return function(results, status){

                if(status == google.maps.GeocoderStatus.OK){
                marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: info[i][1],
                        icon: pinImage
                    });
                markers.push(this);
                //var contentMarker = 'Testinfo';
                var infoWindow = new google.maps.InfoWindow(/*{
                    content : contentMarker
                }*/);
                google.maps.event.addListener(marker, 'click', function() {

                infoWindow.setContent(info[i][2]);
                infoWindow.open(map,marker);
            }); 

                } else {
                    alert("L'adresse n'a pas pu etre geocodee avec succes.");
                }

            }
            }(i));      
        }
         calcRoute();

      }
      function calcRoute(){

            var request = {
                origin: info[5][0],
                destination: info[1][0],
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function(response,status){
                if(status==google.maps.DirectionsStatus.OK){
                //alert("Je passe ici2");
                    directionsDisplay.setDirections(response);
                }
            });
        }
      google.maps.event.addDomListener(window, 'load', initialize);

似乎是关闭问题:您获得了上一个索引的infoWindow。 我添加了一个新功能:

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.open(map, marker);
    });
}

并注释掉/更改了事件侦听器的一部分:

                    //google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.setContent(info[i][2]);
                    //infoWindow.open(map,marker);
                    //});
                    addInfoWindowOnEvent(marker, infoWindow, map, 'click');

infowindow的文本几乎没有扩展才能看到区别。 之前只是testinfo

另外,我也从标记中注释掉了变量pinImage ,因为它没有定义。

参见jsbin中的示例

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM