Google映射事件点击监听器

时间:2012-10-05 10:39:19

标签: google-maps

我一直在尝试在Google地图上创建一些多边形叠加层,点击后会在新窗口中链接到另一个网页。但是它只链接到最后生成的多边形的URL。有什么想法吗?我想我遗漏了一些基本的东西,但这与我如何生成多边形然后尝试从中提取URL有关呢?

<script type="text/javascript"> 
  var mapSquares = {};

  mapSquares['square1'] = {
    coords: [
      new google.maps.LatLng(52.572177, -0.247192), 
      new google.maps.LatLng(52.612177, -0.247192), 
      new google.maps.LatLng(52.612177, -0.347192),
      new google.maps.LatLng(52.572177, -0.347192)
            ],
    url: 'http://www.google.co.uk'
  };

  mapSquares['square2'] = {
    coords: [
      new google.maps.LatLng(52.522177, -0.247192), 
      new google.maps.LatLng(52.572177, -0.247192), 
      new google.maps.LatLng(52.572177, -0.347192),
      new google.maps.LatLng(52.522177, -0.347192)
            ],
    url: 'http://www.bbc.co.uk'  
  }

var allMapSquares;

function initialize() { 
  var myLatLng = new google.maps.LatLng(52.572177, -0.247192); 
  var mapOptions = { 
    zoom: 12, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  }; 

var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 

  for (var mapSquare in mapSquares) {
    var drawMapSquare = { 
      paths: mapSquares[mapSquare].coords, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.8, 
      strokeWeight: 3, 
      fillColor: "#FF0000", 
      fillOpacity: 0.35,
      map: map 
    }; 

    google.maps.event.addListener(drawMapSquare, 'click', function() {
         window.open(mapSquares[mapSquare].url,'_blank');
    });

    allMapSquares = new google.maps.Polygon(drawMapSquare);

  }

}
</script>

非常感谢!

2 个答案:

答案 0 :(得分:1)

当你推入for循环并传递mapSquare作为mapSquares []数组变量的索引时,它取最后一个值因为循环迭代到并且mapSquare的最后一个位置是最后一个所以它将根据你的for循环占用总是最后一个位置这就是为什么你总是得到最后一个链接

google.maps.event.addListener(drawMapSquare, 'click', function() {
     window.open(mapSquares[mapSquare].url,'_blank'); // here this will call when you click and at that time mapSqare position was last.
});

答案 1 :(得分:0)

我也遇到了这个问题,简单的方法是:放置实际创建InfoWindow的代码块,并将事件监听器添加到单独的函数调用中。这实际上将避免全局和局部变量问题。

Pratik的答案解释了原因。