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

我真的被什么东西卡住了。每个地图标记的信息窗口都显示相同的信息。它似乎是我每次用来存储内容节点的数组末尾的内容。我很确定这是因为infowindow没有连接到正确的标记

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

var标记=[]；
var contentArray=[]；
var titleArray=[]；
var latlngArray=[]；
var映射；
//var信息窗口；
var音乐会；
函数defaultMap（）
{
//纬度：38
//经度：-97
//窗口警报（“内部功能”）；
变量映射选项={
中心：新google.maps.LatLng（38，-97），
缩放：4，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map”），
地图选项）；
//window.alert（“addMarkers contentArray的大小为：”+contentArray.length）；
//window.alert（“添加标记titleArray的大小为：“+titleArray.length”）；
//警告（“latLongArray的大小为：“+latlngArray.length”）；
//对于（var i=0；i而言，问题在于当循环结束时，i为10。
每个信息窗口都显示：

 infowindow.setContent(contentArray[i]);

有两种方法可以解决此问题：

函数闭包。使用createMarker函数将infowindow内容与转换为v3的标记关联
标记包含内容的成员变量，通过引用“this”在click listener中访问它
此代码也适用于所有希望在从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; 
}

函数latLongCallback（latitude，longitude）{
var latlng=新的google.maps.latlng（latitude，longitutede）；
var options={zoom:4，center:latlng，mapTypeId:google.maps.mapTypeId.ROADMAP}；
var map=new google.maps.map（document.getElementById（'map'），options）；
$.ajax（{type:“：”GET“，
数据类型：“json”，
网址：'https://www.xyz.com/yourrfolder/markers.php',
成功：功能（响应）{
var total=响应长度；
var数据_数组、名称、类型、地址、纬度、经度、到达、离开、备注；
var infowindow=new google.maps.infowindow（）；
对于（变量i=0；i位置：“+address+”
到达：“+Arrival+”
出发：“+detairation+”
备注：“+Notes+”；
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
bindInfoWindow（propMarker、map、infowindow、contentString）；
}
}
});
返回；
}

下面是上面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);
<?

我将对此进行调查并报告结果。添加了第二种方法的示例。如何将信息窗口与标记关联这是常见问题解答，请尝试查看问题右侧的“相关”问题。这是一个结束问题。请参见此处的工作示例：