Angular Google Maps：无法从点击事件对象中获取 LatLng

Question

在我的应用程序中，点击谷歌地图后，我需要获取 lat 和 lng 信息以进行进一步处理。由于该应用程序使用 angularJs 作为框架，因此我使用 Angular Google Maps 库来制作地图。我的代码如下：

$scope.map = {
        center: {
           latitude: 37.782551,
           longitude: -122.445368
        },
        zoom: 12,
        heatLayerCallback: function (layer) {
           MockHeatLayer(layer);
        },
        showHeat: true,
        // the issue is from here
        onclick: {
            click : function(maps, event, arguments) {
                console.log(event.latLng); //return undefined 
                console.log(typeof(event)); //return string type instead of event object 
            }
        }
};

HTML标签如下：

<ui-gmap-google-map center='map.center' zoom='map.zoom' events='map.onclick'>
    <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="map.showHeat" onCreated="map.heatLayerCallback"></ui-gmap-layer>
</ui-gmap-google-map>

如您所见，我在map 数组中将events 设置为onclick。
但是经过调试，handle函数中的event是字符串而不是对象，请问有什么问题呢？

Answer 1

根据文档，第二个参数是eventName，应该是字符串，因为事件对象在第三个参数中。来自docs：

处理函数接受三个参数： 1. 地图：GoogleMap 2. object eventName：事件的名称 3. arguments：谷歌地图为此事件类型提供的参数。

所以不要在你的代码中使用onclick: { ...，而是这样写：

events: {
     click : function(maps, eventName, arguments) {
          var e = arguments[0];
          var lat = e.latLng.lat(), lng = e.latLng.lng();
          console.log("my lat is:" + lat + ", lng is:" + lng);
     }
}

更新 events 数组也可以命名为 onclick，具体取决于您要处理的事件类型。