每个信息窗口都显示相同的数据映射 api v3

Question

我真的被一些事情困住了。每个地图标记的信息窗口都显示相同的信息。它似乎是我每次用来存储内容节点的数组末尾的内容。我很确定这是因为信息窗口没有附加到正确的标记上

    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]);
        }
    }

Answer 1

问题是当循环结束时，i 是 10。 每个信息窗口都显示：

 infowindow.setContent(contentArray[i]);

解决问题的方法有两种：

1. 函数关闭。使用 createMarker 函数将信息窗口内容与标记相关联。 Explained in Mike Williams' v2 tutorial、one of his examples using function closure，已翻译为 v3。
2. 包含内容的标记成员变量，通过引用“this”在点击监听器中访问它。 this similar question may help with this 的答案。这是example of using a member variable of the marker

Answer 2

此代码也适用于所有想要在从 DB 检索到的地图上放置多个标记的人

我将粘贴实时项目的代码意味着工作。你可以从中得到一些帮助。

function latLongCallback(latitutde,longitutde){
 var latlng = new google.maps.LatLng(latitutde, longitutde);
    var options  = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map      = new google.maps.Map(document.getElementById('map'), options);

    $.ajax({type: "GET",
      dataType: 'json',
     url: 'https://www.xyz.com/yourrfolder/markers.php',
    success: function(response){
         var total=response.length;
         var data_array,name,type,address,lat,lon,arrival,departure,notes;
          var infowindow = new google.maps.InfoWindow();   
       for(var i=0; i < total; i++){
            data_array=response[i];
            name=data_array['name'];
            id = data_array['id'];
            address=data_array['address'];
            arrival=data_array['arrival'];
            departure=data_array['departure'];
            notes=data_array['notes'];
            lat=data_array['lat'];
            lon=data_array['lon'];
            icon=data_array['icon'];
            sc_id=data_array['sc_id'];

var propPos = new google.maps.LatLng(lat,lon);
            propMarker = new google.maps.Marker({
                position: propPos,
                map: map,
                icon: icon,
                zIndex: 3
            });

var contentString = "<div style='font-size:9px;overflow:hidden'>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Arrival :</label> "+arrival+"<br/><label class='label'>Departure :</label> "+departure+"<br/><label class='label'>Notes :</label> "+notes + "</div><div style='font-size:9px;overflow:hidden'><a href='#2' onclick="+xx+" class='popup-txt' style='font-size:11px; margin-top:3px;'>Message him</a><a href='#1' onclick="+invite+" class='popup-txt' style='font-size:11px; margin-top:3px; float:right;'>Invite Friend</a></div>"; 

   function bindInfoWindow(marker, map, infowindow, html) {
         google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(html);
                    infowindow.open(map, marker);
                });
 bindInfoWindow(propMarker, map, infowindow, contentString);
     }
    }
});
return; 
}

这里是上面js中提到的marker.php

<?php 
  $data=array();
  $retrive_marker_query = "your query";
  $result               =    db_execute($retrive_marker_query);
  $cnt=0;

while ($row = mysql_fetch_assoc($result)){
 $name      = $row['name'];
 $id        = $row['fb_id'];
 $sc_id     = $row['id'];
 $address   = $row['location'];
 $lat       = $row['lat'];
 $lon       = $row['lon'];


   $data[$cnt]['name']    = $name;
   $data[$cnt]['id']      = $id;
   $data[$cnt]['sc_id']   = $sc_id;
   $data[$cnt]['address'] = $address;
   $data[$cnt]['lat']     = $lat;
   $data[$cnt]['lon']     = $lon;

   $cnt++;
   }
$data=json_encode($data);
 echo($data);
<?