Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
475 views
in Technique[技术] by (71.8m points)

javascript - Every infowindow is displaying the same data maps api v3

I am really stuck on something. Every map marker's infowindow is displaying the same info. It seems to be the content at the end of an array that i use to store content nodes every time. I am pretty sure it is because the infowindow is not being attached to the proper marker

    var markers = [];
    var contentArray = [];
    var titleArray = [];
    var latlngArray = [];
    var map;
    //var infowindow;
    var concert;

    function defaultMap()
    {
        //Latitude: 38
        //Longitude: -97
        //window.alert("inside function");
        var mapOptions = {
          center:new google.maps.LatLng(38,-97),
          zoom:4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"),
                                  mapOptions);


           // window.alert("addMarkers the size of contentArray is: "+contentArray.length);
       //window.alert("addMarkers the size of the titleArray is: "+titleArray.length);
       // window.alert("addMarkers the size of the latLongArray is: "+latlngArray.length);



        //for(var i =0;i<2;i++)
        //{
        //    if(i == 0)
        //    {
        //        marker = new google.maps.Marker({
        //           position: new google.maps.LatLng(37.8172784,-96.8909115),
        //           map:map
        //        });
        //        markers.push(marker);
        //    }
        //    else
        //    {
        //        marker = new google.maps.Marker({
        //           position: new google.maps.LatLng(37.8172973,-96.8766355),
        //           map:map
        //        });
        //        markers.push(marker);
        //    }
        //    //markers[0] = new google.maps.LatLng(37.8172784,-96.8909115);
        //    //markers[1] = new google.maps.LatLng(37.8172973,-96.8766355);
        //    
        //}
        //addMarkers();
    }

    //function 


            //
            //{
            //infowindow = new google.maps.InfoWindow({
            //content:list
            //});
            //google.maps.event.addListener(marker,'click',function(){
            // infowindow.open(map,marker);
            //});


    function addMarkers()
    {
        //console.dir(contentArray[contentArray.length-1]);
        for(var i = 0;i <10;i++)
        {
            if(i == 0)
            {
                //window.alert("i = "+i);
                console.log(latlngArray[i]);
                var marker = new google.maps.Marker({
                   position:latlngArray[i],
                   animation:google.maps.Animation.DROP,
                   icon:'./images/club.png',
                    title:titleArray[i],
                   map:map
                });

                //marker.setMap(map);
                            var infowindow = new google.maps.InfoWindow({

                });

                google.maps.event.addListener(marker,'click',function()
                                              {
                                                //console.log(infowindow.getContent());
                                                infowindow.setContent(contentArray[i]);
                                                infowindow.open(map,this);
                                              });
                markers.push(marker);

            }
            else
            {
                console.log(latlngArray[i]);
                var marker = new google.maps.Marker({
                   position:latlngArray[i],
                   animation:google.maps.Animation.DROP,
                   icon:'./images/restaurant.png',
                   title:titleArray[i],
                   map:map
                });

                var infowindow = new google.maps.InfoWindow({});
                            //console.log(infowindow.getContent());

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

                  infowindow.setContent(contentArray[i]);
                  console.log(infowindow.getContent());
                  infowindow.open(map,this);
                });
                 markers.push(marker);
            }

            //console.log(i);
            //console.log(contentArray[i]);
        }
    }
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The problem is that when the loop ends, i is 10. Every infowindow displays:

 infowindow.setContent(contentArray[i]);

There are two ways to solve the problem:

  1. function closure. Use a createMarker function to associate the infowindow content with the marker. Explained in Mike Williams' v2 tutorial, one of his examples using function closure, translated to v3.
  2. marker member variable containing the content, access it in the click listener by referencing "this". The answer to this similar question may help with this. Here is an example of using a member variable of the marker

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...