Google maps api v3：地理编码多个地址和信息窗口答案

【问题标题】：Google maps api v3: geocoding multiple addresses and infowindowGoogle maps api v3：地理编码多个地址和信息窗口
【发布时间】：2013-06-27 20:38:40
【问题描述】：

我正在尝试获取多个地址的信息窗口。它正在创建标记，但是当我单击标记时，不会弹出信息窗口。请帮忙看看这段代码有什么问题。剩下的所有信息都很好，唯一的问题是信息窗口没有出现。

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="height: 800px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
      ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
      ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
      ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
      ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(43.253205,-80.480347),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();

    var marker, i;

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

        geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
            //alert(status);
            if (status == google.maps.GeocoderStatus.OK) {

                //alert(results[0].geometry.location);
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                }); 

                google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);});
                google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});

            }
            else
            {
                alert("some problem in geocode" + status);
            }
        }); 
    }

  </script>
</body>
</html>

【问题讨论】：

标签： google-maps-api-3 infowindow

【解决方案1】：

为避免与marker 的范围有关的问题，您可以执行以下两项操作之一

1

将marker 设为geocoder.geocode() 回调的本地：

var marker = new google.maps.Marker({...});

并更正传递给infowindow.open()的参数顺序：

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});

2

使用this，从它自己的事件处理程序中可靠地引用回标记，如下所示：

google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map, this);
});

就个人而言，我会使用方法 2。

【讨论】：

【解决方案2】：

你有 google.maps.InfoWindow.open 方法的参数向后：

open(map?:Map|StreetViewPanorama, 锚点?:MVCObject) |无 |在给定地图上打开此信息窗口。可选地，信息窗口可以与锚相关联。在核心 API 中，唯一的锚点是 Marker 类。但是，锚点可以是任何 MVCObject，它公开 LatLng 位置属性和可选的用于计算 pixelOffset 的 Point anchorPoint 属性（请参阅 InfoWindowOptions）。 anchorPoint 是从锚点位置到信息窗口尖端的偏移量。

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(marker, map);});

应该是：

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});

working example

【讨论】：