使用角度Google地圖時，如何正確處理標記點擊事件？

Question

我想在我的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（僅來自我的控制器的相關markerClick）：

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

編輯 ：也可以以其他方式提出問題。 如何正確使用UI-GMAP-標記s的UI-GMAP窗口？ 該文檔非常差，唯一的示例是ui-gmap-marker ...

Answer 1

我找到了一個很好的例子。

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: {} 
  }
};
});

柱塞： 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 /或表達式綁定：單擊標記時執行的事件處理程序。 如果提供函數名稱（例如'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中加上括號。 我得到了Google Maps實例，名稱為“ click”，並且在其中有我的ID的標記是我需要的。

希望這可以幫助。