谷歌地图V3 - 信息窗口总是假设最后的标记的位置(Google Maps v3 - Infowi

我遇到一个问题，我的信息窗口的位置。 我生成一个for循环的标志，但是当我点击信息窗口，位置始终设置到产生最后的标记。 内容是正确的，但是。 这绝对是一个范围界定问题，也有一个Drupal Ajax调用其获取的内容（不包含任何位置信息）。 任何人都可以帮忙吗？ 下面是for循环：

for ( markerItem in data ) {

    var icon = icons[data[markerItem][3]].mouseOutIcon;
    var image = icons[data[markerItem][3]].mouseOverImage;
    var latlng = new google.maps.LatLng( data[markerItem][0], data[markerItem][1] );
    var marker = new google.maps.Marker({
                            icon:icon,
                            clickable:true,
                            position: latlng,
                            map: map,
                            draggable:false,
                            title: data[markerItem][2]

    });


    marker.mapid = mapid;
    marker.mid = data[markerItem][4];


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



        $.get('/map-info/'+this.mapid+'/'+this.mid, null, function(response) {
            console.log('first' + marker.getPosition());
            var result = Drupal.parseJson(response);
            if ( result.status == 0 ) {

                if(infowindow != null) {
                    infowindow.close();
                }

                infowindow = new google.maps.InfoWindow({
                    content: result.html
                    //position: marker.getPosition()

                });


                infowindow.open(map,marker);

            }
        });

        google.maps.event.addListener(marker, 'mouseover', function(latlng) {
            this.setImage( this.mouseOverImage );

        });
        google.maps.event.addListener(marker, 'mouseout', function(latlng) {
            this.setImage( this.mouseOutImage );
        });


    });



    marker.mouseOverImage = image;
    marker.mouseOutImage = icon.image;
    gmap.overlays.push( marker );
    marker.setMap(map);

    if ( checkboxState[data[markerItem][3]] ) {
        marker.setMap(map);
    }
    else {
        marker.setMap(null);
    }
}
});
}
else {
console.log('inside else');

var lat3 = gmap.oldBounds.getSouthWest().lat();
var lng3 = gmap.oldBounds.getSouthWest().lng();
var lat4 = gmap.oldBounds.getNorthEast().lat();
var lng4 = gmap.oldBounds.getNorthEast().lng();
$.get('/map-markers/'+mapid+'/'+lat1+'/'+lng1+'/'+lat2+'/'+lng2+'/'+lat3+'/'+lng3+'/'+lat4+'/'+lng4, null, function(response) {
var result = Drupal.parseJson(response);
var data = result.markers;
for ( var i = 0; i < 4; i++ ) {
    icons.push( { mouseOutIcon: Drupal.gmap.getIcon('boilers', i), mouseOverImage: mouseOverImage(Drupal.gmap.getIcon('boilers', i).image)});
}
var gmap = Drupal.gmap.getMap(mapid);
for ( markerItem in data ) {
    var icon = icons[data[markerItem][3]].mouseOutIcon;
    var image = icons[data[markerItem][3]].mouseOverImage;
    var latlng = new GLatLng( data[markerItem][0], data[markerItem][1] );
    var marker = createMarker(latlng, {icon: icon, title:data[markerItem][2], clickable:true, draggable:false }, data[markerItem][4] );
    marker.mouseOverImage = image;
    marker.mouseOutImage = icon.image;
    gmap.overlays.push( marker );
    map.addOverlay( marker );
    if ( checkboxState[data[markerItem][3]] ) {
        //marker.show();
    }
    else {
        //marker.hide();
    }
}

Answer 1:

你必须使用闭包来解决这个问题。

下面的工作示例中

从下面的代码使用JS方法AddInfoWidnow到信息窗口添加标记。

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

    }); 

}

调用AddInfoWidnow方法中的for循环

function ShowOnMap(ContainerId, mapItems) {

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = {
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
};

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 
{

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker({
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
});

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

}
}

使用下面的snnipet我把它叫做。

  var mapItems='[
  {
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  },
  {
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  }
]';
    ShowOnMap(containerId2, mapItems);

事情是你必须使用封闭添加的信息窗口，这对我的作品。

参考

文章来源: Google Maps v3 - Infowindow always assumes the last marker's position