Google Map API Infowdow单击事件未返回latlng

Question

我在Google Map上创建了一个多边形，并希望在我单击多边形时弹出一个InfowDOW。代码如下：

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，为未定义。我想知道怎么了。

Answer 1

event.latlng不存在，javaScript是案例敏感的，属性为 event.latLng

概念证明小提琴

代码段：

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);
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>