Question

我正在尝试获取多个地址的信息窗口。它创建标记，但当我点击标记时，infowindow不会弹出。请帮助，看看此代码中可能出现的问题。休息所有信息都很好只有问题是infowindow不会出现。

<!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>

Answer 1

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

open（map？：Map | StreetViewPanorama，anchor？：MVCObject）|没有|在给定的地图上打开此InfoWindow。可选地，InfoWindow可以与锚相关联。在核心API中，唯一的锚是Marker类。但是，锚可以是任何公开LatLng位置属性的MVCObject，也可以是用于计算pixelOffset的Point anchorPoint属性（请参阅InfoWindowOptions）。 anchorPoint是从锚点位置到InfoWindow顶端的偏移量。

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

应该是：

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

working example

Answer 2

为避免与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.

谷歌地图api v3：地理编码多个地址和infowindow

2 个答案:

1

2