Question

我想在我的ASP.NET MVC应用中使用Angular Google Maps（http://angular-ui.github.io/angular-google-maps）。我有一张地图，我有标记，标记点击显示警报。但是，我希望能够在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-window中正确使用ui-gmap-marker s ？文档很差，唯一的例子是ui-gmap-marker ...

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

Answer 2

你试过了吗？

ng-click="markerClick($event)"

Answer 3

我认为这是你想要的方式，在你的原始问题中取出括号，你会得到三个变量：

标记文档说：

PerModel /或表达式绑定：单击标记时执行的事件处理程序。如果您提供功能名称（例如＆＃39; markerClick＆＃39;），您将获得三个不同的参数：您单击生成的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中添加括号。我得到谷歌地图实例，名称＆＃34;点击＆＃34;，以及带有我身份证明的标记，这就是我需要的。

希望这有帮助。

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

3 个答案: