Google Map API InfoWindow点击事件未返回latlng

时间:2016-12-14 17:47:13

标签: google-maps-api-3

我在谷歌地图上创建了一个多边形,并希望在点击多边形时弹出一个infoWindow。代码如下:

google.maps.event.addListener(polygon, 'click', showVolume);
polygon_infoWindow = new google.maps.InfoWindow;

在showVolume函数中,

function showVolume(event){
    var polygon_Name = this.Name;
    var volume = this.Volume;
    var pt = event.latlng;
    var contentString = '<b>Name: </b>' + polygon_Name + '<br>' + '<b>Volume: </b>' + volume + '<br>' + '<b>Clicked Location: </b>' + pt;

    polygon_infoWindow.setContent(contentString);
    polygon_infoWindow.open(map);
    polygon_infoWindow.setPosition(pt);
}

该函数返回属于多边形的正确信息。但是它将event.latlng返回为undefined。我想知道出了什么问题。

1 个答案:

答案 0 :(得分:0)

event.latlng不存在,javascript区分大小写,属性为event.latLng

proof of concept fiddle

代码段

&#13;
&#13;
var geocoder;
var map;
var polygon_infoWindow;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polygon = new google.maps.Polygon({
    map: map,
    Name: "Fred",
    Volume: 1000,
    path: [{
      lat: 37.4419,
      lng: -122.1419
    }, {
      lat: 37.42,
      lng: -122.16
    }, {
      lat: 37.4419,
      lng: -122.1819
    }]
  });
  google.maps.event.addListener(polygon, 'click', showVolume);
  polygon_infoWindow = new google.maps.InfoWindow;
}
google.maps.event.addDomListener(window, "load", initialize);

function showVolume(event) {
  var polygon_Name = this.Name;
  var volume = this.Volume;
  var pt = event.latLng;
  var contentString = '<b>Name: </b>' + polygon_Name + '<br>' + '<b>Volume: </b>' + volume + '<br>' + '<b>Clicked Location: </b>' + pt;

  polygon_infoWindow.setContent(contentString);
  polygon_infoWindow.setPosition(pt);
  polygon_infoWindow.open(map);

}
&#13;
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;