Angular Google Maps 地图点击事件有效一次

Question

我一直遇到与 this

非常相似的问题

然而，那个人的问题从未得到回答，我的情况略有不同。

我正在尝试向我的地图添加一个点击事件，该事件会将地图的中心更改为点击的位置。我执行此操作的代码效果很好，但它只能运行一次，然后当我再次单击时出现此错误：

angular-google-maps.js:6815 Uncaught TypeError: Cannot read property 'click' of undefined

这是我的地图对象：

vm.map = {
     center: {
          latitude: l.latitude,
          longitude: l.longitude
     },
     zoom: 13,
     events: {
          click: function(map, event, coords) {
               vm.map = {
                    center: {
                         latitude: coords[0].latLng.lat(),
                         longitude: coords[0].latLng.lng()
                    },
               };

               $scope.apply();

           }
     }
};

这是我的 html:

<ui-gmap-google-map center="location.map.center" zoom="location.map.zoom" draggable="true" options="tabLocations.map.options" events=location.map.events>
    <ui-gmap-search-box template="'scripts/components/tab-locations/searchbox.tpl.html'" events="location.map.searchbox.events" parentdiv="'searchbox-container'"></ui-gmap-search-box>
    <ui-gmap-marker ng-if="location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-active.svg'}"></ui-gmap-marker>
    <ui-gmap-marker ng-if="!location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-inactive.svg'}"></ui-gmap-marker>
</ui-gmap-google-map>

Answer 1

第一次点击后，您将重新定义一个没有点击事件的全新地图：

vm.map = {
    center: {
        latitude: coords[0].latLng.lat(),
        longitude: coords[0].latLng.lng()
    },
};

这将覆盖您之前设置的所有属性，其中包括 click。

改用setCenter：

click: function(map, event, coords) {

    var latLng = new google.maps.LatLng(latitude: coords[0].latLng.lat(), latitude: coords[0].latLng.lng());
    vm.map.setCenter(latLng);

}

参考：Google Maps API

Angular Google Maps 地图点击事件有效一次

Angular Google Maps map click event works once

javascript

angularjs

google-maps

angular-google-maps