Google Maps v3 - Infowindow始终会采用最后一个标记的位置 [英] Google Maps v3 - Infowindow always assumes the last marker's position

问题描述

我遇到了我的infowindows的位置问题。我在for循环中生成标记，但是当我单击infowindow时，位置始终设置为最后生成的标记。内容是正确的，但是。这绝对是一个范围问题，还有一个Drupal Ajax调用来获取内容（不包含任何位置信息）。谁能帮忙？这里是for循环：

  for（markerItem in data）{
 
 var icon =图标[数据[markerItem] [3]] mouseOutIcon。 
 var image =图标[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（标记，'click'，函数（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.ad dListener（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; $ b $ for（var i = 0 ; i< 4; i ++）{
 icons.push（{mouseOutIcon：Drupal.gmap.getIcon（'boilers'，i），mouseOverImage：mouseOverImage（Drupal.gmap.getIcon（'boilers'，i））。图片）}）; 
} 
 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（）; 
 
 
 
 $ div $解析方案

你必须 使用闭包 才能解决此问题。

以下是一个正在使用的示例

使用下面代码中的JS方法 AddInfoWidnow 将InfoWindow添加到标记。

 函数AddInfoWidnow（marker，message）
 {
 var infowindow = new google.maps.InfoWindow（{content：message}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 
 infowindow.open（marker.get（'map'），marker）; 
 
}）; 
 
 $ b $ / code> 

调用 AddInfoWidnow 中的方法



 函数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）; （var y = 1; y< = arrJsonObject.length; y ++）
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 $ b $ y  -  1] .Latitude，arrJsonObject [y  -  1] .Lonngitude）; 
 
 var marker = new google.maps.Marker（{
位置：myLatLng1，
 map：mapCust，
标题：'Marked at'+ arrJsonObject [y  - 1] .markedDate 
}）; 
 
 addInfoWindows（marker，y-1，arrJsonObject）; 
 
 
 marker.setMap（mapCust）; 
 
 
 $ b $ / code $ / pre 
 
 
使用下面的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：2014/2/20 3:02:19 PM 
} 
''; 
 ShowOnMap（containerId2，mapItems）; 
  
事情是你必须使用闭包来添加信息窗口，这对我有用。
 
 
 
 参考  
I'm running into an issue with the position of my infowindows. I am generating the markers in a for-loop, but when I click on an infowindow, the position is always set to the marker that was generated last. The content is correct, however. It's definitely a scoping issue, and there is also a Drupal Ajax call that fetches the content (which doesn't contain any location info). Can anyone help? Here is the for-loop:
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();
    }
}

解决方案
You have to use closures to solve this problem.

The below in a working sample

Use the JS method AddInfoWidnow from below code to add InfoWindow to a marker.
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);

    }); 

}
call the AddInfoWidnow method inside the for loop
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);

}
}
Using the below snnipet I called it.
  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);
The thing is you have to add the info window using closure and This works for me.

Reference

                        
这篇关于Google Maps v3  -  Infowindow始终会采用最后一个标记的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！