InfoWindow在api谷歌地图javascript v3

时间:2012-03-06 06:44:44

标签: javascript google-maps google-maps-api-3

有这样的功能。它有效,没问题。

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      alert('sss');
    });
  }
}

http://clip2net.com/s/1FtrV

http://clip2net.com/s/1Ftrp

但是如果我尝试显示InfoWindow而不是alert(),那么该函数不起作用。

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markers=Array();
  var infowindow=Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    infowindow[i]=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      infowindow[i].open(map, markers[i]);
    });
  }
}

请提示我错误的地方。

4 个答案:

答案 0 :(得分:4)

如果我没有弄错,当触发鼠标悬停事件时你的数组超出了范围,将infowindow设置为标记属性你应该没问题(也应该全局声明数组以供进一步参考)

var arrLatLng=Array();
var markers=Array();
function setIconsOnMap(arrIcons, pathIcon){
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i]=new google.maps.LatLng(arrIcons[i]['geo lat'],
      arrIcons[i]['geo lon']);
  }
  for (i=0; i<arrLatLng.length; i++){
    markers[i]=new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers[i].setIcon(pathIcon);
    markers[i].infoWindow=new google.maps.InfoWindow({
      content: 'uuuu'
    });
    google.maps.event.addListener(markers[i], 'mouseover', function(){      
      this.infoWindow.open(map, this);
    });
  }
}

答案 1 :(得分:2)

function setIconsOnMap(arrIcons, pathIcon){
  var arrLatLng=Array();
  var markersArray = Array();
  var infowindowArray = Array();
  for (var i=0; i<arrIcons.length; i++){
    arrLatLng[i] = new google.maps.LatLng(arrIcons[i]['geo lat'],
    arrIcons[i]['geo lon']);

    markers = new google.maps.Marker({
      position: arrLatLng[i],
      map: map
    });
    markers.setIcon(pathIcon);
    markersArray[i] = markers;
    infowindow = new google.maps.InfoWindow({
      content: 'uuuu'
    });

    google.maps.event.addListener(markers , 'mouseover', function(){      
      infowindow.open(map, markers);
    });
    infowindowArray[i] = infowindow;
  }
}

试试这段代码。它会起作用。

答案 2 :(得分:1)

不完全确定你要做什么。 您只需要设置一个infowindow并在鼠标悬停时动态加载内容。

您每次只需使用一个标记并设置监听器。

您可能需要尝试以下操作,但我不完全确定您要对代码执行的操作。

google.maps.event.addListener(markers[i], 'mouseover', (function(event, index){   
  return function(){
   infowindow.content = infowindowArray[index];
   infowindow.open(map,this);
  }
});

This link可能会有所帮助。

答案 3 :(得分:1)

这个听众

google.maps.event.addListener(markers[i], 'mouseover', function(){      
      infowindow[i].open(map, markers[i]);
    });

在事件发生时运行该函数。因此,您点击标记,API会运行该功能并尝试在infoWindow[i]上打开marker[i]。在运行时,i超出范围,或者它是循环的最后一个值。

将infoWindows与标记一致地链接的正确方法是使用辅助函数 - 通常称为createMarker() - 作为demonstrated in Larry's port of Mike Williams'代码。