如何在AngularJS中使用$ Watch（）函数进行Google Map API点击事件？

发布于 2025-01-21 19:15:25 字数 227 浏览 4 评论 0原文

我想捕获单击事件时，当您在Google地图上单击标记时发生，然后执行一些代码。我已经尝试过，但似乎没有用。

             $scope.$watch('click', function(newVal, oldVal) {
                 alert("Marker was clicked");
              });

有什么想法吗？

原文

I want to catch the click event that happens when you click on a marker on a google map, and then execute some code. I've tried this, but it doesn't seem to be working.

             $scope.$watch('click', function(newVal, oldVal) {
                 alert("Marker was clicked");
              });

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一身仙ぐ女味 2025-01-28 19:15:25

Google Maps以iframe显示了地图，并且您无法使用iframe捕获单击。我使用 ngmap 用于我的gangularjs应用中的地图显示，而html结构最终看起来像这样：

<ng-map class='map' style="">
   <marker id='{{locale.id}}' position="{{locale.position}}" ng-repeat="locale in locales" on-click="showInfoW(locale)"></marker>
   <info-window id="foo-iw">
     <!-- info window HTML stuff here -->
   </info-window>
 </ng-map>

看到点击在其中？在这里，您可以点击并在代码中执行一些操作。

我的JS看起来像这样：

    $scope.showInfoW = function(e, locale) {
        $scope.vm.locale = locale
        $scope.map.showInfoWindow('foo-iw', locale.id);
    }

    NgMap.getMap().then(function(map) {
        vm.map = map
        var latlng, bounds = new google.maps.LatLngBounds();
        for (var i in $scope.locales) { // your marker list here
            latlng = new google.maps.LatLng($scope.locales[i].position[0], $scope.locales[i].position[1]);
            bounds.extend(latlng) // your marker position, must be a LatLng instance
        }
        $timeout(function() {
            google.maps.event.trigger(map, 'resize');
            $scope.map.fitBounds(bounds);
            $scope.map.setZoom(14)
        }, 500)
      })

没有尝试解释所有内容，您可以看到（使用精美的NGMAP软件包）可以捕获标记上的单击。

Google maps displays the map in an iframe, and you can't capture clicks like that with an iframe. I use NgMap for map displays in my angularJS app, and the HTML structure ends up looking like this:

<ng-map class='map' style="">
   <marker id='{{locale.id}}' position="{{locale.position}}" ng-repeat="locale in locales" on-click="showInfoW(locale)"></marker>
   <info-window id="foo-iw">
     <!-- info window HTML stuff here -->
   </info-window>
 </ng-map>

See that on-click in there? That is where you can get the click and do something in your code.

My JS looks something like this:

    $scope.showInfoW = function(e, locale) {
        $scope.vm.locale = locale
        $scope.map.showInfoWindow('foo-iw', locale.id);
    }

    NgMap.getMap().then(function(map) {
        vm.map = map
        var latlng, bounds = new google.maps.LatLngBounds();
        for (var i in $scope.locales) { // your marker list here
            latlng = new google.maps.LatLng($scope.locales[i].position[0], $scope.locales[i].position[1]);
            bounds.extend(latlng) // your marker position, must be a LatLng instance
        }
        $timeout(function() {
            google.maps.event.trigger(map, 'resize');
            $scope.map.fitBounds(bounds);
            $scope.map.setZoom(14)
        }, 500)
      })

Without trying to explain everything, you can see that (using the wonderful NgMap package) you can capture the click on the marker.

回复收藏 0 原文

~没有更多了~