Question

我制作了一个我需要在地图中标记的所有地方的数组，以及每个标记的信息，如下所示：

 var paises = [];
 paises.push([new google.maps.LatLng(4.214943141390651, -73.828125), '<div class="mCont"><h2 class="mPais">Colombia</h2><p class="mPInfo">Donec mattis faucibus hendrerit. Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(17.727758609852284, -4.21875), '<div class="mCont"><h2 class="mPais">Surafrica</h2><p class="mPInfo">Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(40.245991504199026, 126.826171875), '<div class="mCont"><h2 class="mPais">Korea</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);

我还必须创建此功能来设置所有标记并在每个标记上设置信息，当我点击标记时，它会打开信息窗口并将标记居中：

(function(i, marker){

        //creamos el evento click sobre las marcadores para que habran la ventana de informacion
         google.maps.event.addListener(marker, 'click', function(){
                var ll = paises[i][0];


                if(!infowindow){
                    infowindow= new google.maps.InfoWindow();
                    }
               infowindow.setContent(paises[i][1]);
               //open infowindow
               infowindow.open(map, marker);
               map.setCenter(ll);

            });
        })(i, marker);

问题发生在我三个数组（韩国）的最后一个国家，地图放大到最后一个标记....

为什么这只发生在我推入阵列的最后一个国家。

提前告知..并抱歉我的英文

这是我的全部代码：

window.onload = function(){

var opt = {
    center:new google.maps.LatLng(25.641526,-36.416019),  
    mapTypeControlOptions:{
        position: google.maps.ControlPosition.TOP
        },
        zoom:3,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    scrollwheel:false,
    };


 var map = new google.maps.Map(document.getElementById('mapa'), opt);


 var paises = [];
 paises.push([new google.maps.LatLng(4.214943141390651, -73.828125), '<div class="mCont"><h2 class="mPais">Colombia</h2><p class="mPInfo">Donec mattis faucibus hendrerit. Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(17.727758609852284, -4.21875), '<div class="mCont"><h2 class="mPais">Surafrica</h2><p class="mPInfo">Cras facilisis urna id odio venenatis a porta purus vehicula.</p></div>']);
 paises.push([new google.maps.LatLng(40.245991504199026, 126.826171875), '<div class="mCont"><h2 class="mPais">Korea</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(52.855864177853995, -1.7578125), '<div class="mCont"><h2 class="mPais">Inglaterra</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(52.5897007687178, 18.369140625), '<div class="mCont"><h2 class="mPais">Polonia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(39.095962936305476, -98.349609375), '<div class="mCont"><h2 class="mPais">Estados Unidos</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(57.279042764977774, -107.841796875), '<div class="mCont"><h2 class="mPais">Canada</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(24.206889622398023, -103.0078125), '<div class="mCont"><h2 class="mPais">M&eacute;xico</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(15.114552871944102, -87.5390625), '<div class="mCont"><h2 class="mPais">Honduras</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(17.189877, -88.49765), '<div class="mCont"><h2 class="mPais">Belice</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(13.923403897723347, -89.208984375), '<div class="mCont"><h2 class="mPais">El Salvador</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(15.665354182093287, -90.2197265625), '<div class="mCont"><h2 class="mPais">Guatemala</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(9.145486056167277, -79.5849609375), '<div class="mCont"><h2 class="mPais">Panama</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(10.01212955790814, -84.111328125), '<div class="mCont"><h2 class="mPais">Costa Rica</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(18.312810846425442, -77.87109375), '<div class="mCont"><h2 class="mPais">Jamaica</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-26.588527147308614, -70.3125), '<div class="mCont"><h2 class="mPais">Chile</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(7.710991655433229, -65.7421875), '<div class="mCont"><h2 class="mPais">Venezuela</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(42.682435398386204, 12.48046875), '<div class="mCont"><h2 class="mPais">Italia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-1.2303741774326018, -78.92578125), '<div class="mCont"><h2 class="mPais">Ecuador</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(-9.622414142924791, -75.234375), '<div class="mCont"><h2 class="mPais">Per&uacute;</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
 paises.push([new google.maps.LatLng(18.250219977065594, -66.5771484375), '<div class="mCont"><h2 class="mPais">Puerto Rico</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
  paises.push([new google.maps.LatLng(-16.941915, -64.577637), '<div class="mCont"><h2  class="mPais">Bolivia</h2><p class="mPInfo">condimentum sem ut sapien pulvinar ac imperdiet magna egestas.</p></div>']);
    var sombra = new google.maps.MarkerImage(
'http://localhost/masterdent/wp-content/themes/masterdent/images/shadow.png',
null,
null,
new google.maps.Point(28, 53)
);

var bounds = new google.maps.LatLngBounds();


     for(var i =0; i < paises.length; i++){

 var marker = new google.maps.Marker({
    position: paises[i][0],
    icon: 'http://localhost/masterdent/wp-content/themes/masterdent/images/pin.png',
    map:map,
    shadow:sombra
    });

    var infowindow;

    (function(i, marker){
         google.maps.event.addListener(marker, 'click', function(){
                var ll = paises[i][0];


                if(!infowindow){
                    infowindow= new google.maps.InfoWindow();
                    }
               infowindow.setContent(paises[i][1]);

               infowindow.open(map, marker);
               map.setCenter(ll);

            });
        })(i, marker);


 bounds.extend(paises[i][0]);
 }   
    map.fitBounds(bounds);
    })(i, marker);
     }

    })();

Answer 1

这是一个经典的for loop variable closure problem。基本上你的for循环中的i变量在执行后是可见的，因此无论i变量在执行后设置的是什么，它仍然是活动的。因此，尝试制作另一个不使用循环变量的函数。见下面的例子：

for(var i =0; i < paises.length; i++){
   makemarker(paises[i]);
}

var infowindow;

function makemarker(obj)
{
    var marker = new google.maps.Marker({
        position: obj[0],
        icon: 'icon',
        map:map,
        });

    google.maps.event.addListener(marker, 'click', function()
    {
      map.setCenter(obj[0]);
      if(!infowindow)
      {
          infowindow= new google.maps.InfoWindow();
      }
      infowindow.setContent(obj[1]);
      infowindow.open(map, marker);
    }
   );
}

setCenter并放大谷歌地图

1 个答案: