使用角度谷歌地图时如何正确处理标记点击事件？

Posted 2023-02-23

【中文标题】使用角度谷歌地图时如何正确处理标记点击事件？

【英文标题】：How to properly handle marker on-click event when using angular google maps?

【发布时间】：2016-03-15 20:40:35

【问题描述】：

我想在我的 ASP.NET MVC 应用程序中使用 Angular Google Maps (http://angular-ui.github.io/angular-google-maps)。我有一张地图，我有标记，markerClick 显示一个警报。但是，我希望能够在 markerClick 函数中获取标记数据。不幸的是，数据未定义。有什么想法吗？

html：

<div ng-app="angular-app">
    <div ng-controller="MapController">
        <ui-gmap-google-map center="map.position" zoom="map.zoom" ng-init="initialize()">
            <ui-gmap-markers models="markers" coords="'location'" doCluster="'true'" idkey="markers.id" click="markerClick()"></ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</div>

JS（仅来自我的控制器的相关标记点击）：

//...
$scope.markerClick = function (data) 
    alert('data is undefined :-(');
;
//...

编辑：这个问题也可以用另一种方式提出。如何正确使用 ui-gmap-markers 和 ui-gmap-window？文档很差，唯一的例子是 ui-gmap-marker...

【参考方案1】：

我在 plunker 上找到了一个很好的例子。

HTML：

<div ng-app="appMaps">
    <div id="map_canvas" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom">

            <ui-gmap-window show="map.window.show"
                            coords="map.window.model"
                            options="map.window.options"
                            closeClick="map.window.closeClick()"
                            templateUrl="'infowindow.tpl.html'"
                            templateParameter="map.window">
            </ui-gmap-window>

            <ui-gmap-markers models="map.markers"
                             coords="'self'"
                             events="map.markersEvents"
                             options="'options'">
            </ui-gmap-markers>

        </ui-gmap-google-map>
    </div>
</div>

JS：

angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope) 
$scope.map = 
  center: 
    latitude: 39.5925511,
    longitude: 2.633202
  ,
  zoom: 14,
  markers: [
    id: 1,
    latitude: 39.5924115,
    longitude: 2.6468146

  , 
    id: 2,
    latitude: 39.5925511,
    longitude: 2.633202
  ],
  markersEvents: 
    click: function(marker, eventName, model) 
      console.log('Click marker');
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    
  ,
  window: 
    marker: ,
    show: false,
    closeClick: function() 
      this.show = false;
    ,
    options:  
  
;
);

Plunker：http://plnkr.co/edit/HUYHuAUgUlUhDd1MRf3D?p=preview

唯一的问题是窗口会准确地显示在图钉的位置，而不是图钉上方。有谁知道我该如何解决这个问题？不好看……

编辑： 这解决了窗口的问题：

uiGmapGoogleMapApi.then(function (maps) 
    // offset to fit the custom icon
    $scope.map.window.options.pixelOffset = new google.maps.Size(0, -35, 'px', 'px');
);

【讨论】：

很高兴看到我的 plunker 帮助了某人 :) 关于窗口位置问题，只需指出您可以直接在控制器中设置相对于标记的位置。更改 ´options:´ 每个 ´options: pixelOffset: width: -150, height: -395´（示例值）。只是实现相同目的的另一种方式。 +1

为了修复窗口位置问题，我添加了：options: pixelOffset: new maps.Size(0, -40) to $scope.map.window above.. 是偏移 x 和 y 坐标从标记窗口

【参考方案2】：

你试过了吗：

ng-click="markerClick($event)" 

【讨论】：

嗯，我看到的和你一样。我深入研究了他们的代码。看起来像一个库错误。我会联系开发团队中的某个人。

【参考方案3】：

我认为这是您尝试的方式，在您原来的问题中，去掉括号，您将获得三个变量：

标记的文档说：

PerModel / 或表达式绑定：单击标记时执行的事件处理程序。如果您提供函数名称（例如“markerClick”），您将获得三个不同的参数： 您点击的生成的 google.maps.Marker 的实例； 事件名称； 您在模型中的确切点击标记对象。

我也在用标记做你正在做的事情，但我想我会用标记尝试一下，即使文档在标记下。

在我的 HTML 中：

<ui-gmap-marker>
                    <!-- All the other options -->
                    click = 'mapCtrl.markerClicked'>
</ui-gmap-marker>

在我的 javascript 中：

this.markerClicked = function(googleMarker, eventName, modelMarker)
    
        console.log(googleMarker);
        console.log(eventName);
        console.log(modelMarker);
    

关键是不要在函数名称后面的 HTML 中放置括号。我得到了谷歌地图实例、名称“click”和一个带有我的 id 的标记，这是我需要的。

希望这会有所帮助。