[英]How to add on-click event on ngMap marker using component?
我正在使用ngMap庫在AngularJS中集成Google地圖。
我在組件控制器內部使用on.click遇到麻煩。 組件代碼:
(function(){
angular.module('map')
.component('mapComponent', {
templateUrl: 'app/mapComponent/map.html',
controller: mapController
});
mapController.$inject = ['NgMap', '$state'];
function mapController(NgMap, $state){
var ctrl = this;
NgMap.getMap().then(function (map) {
ctrl.map = map;
});
ctrl.markers = [
{id: 1, lat: 56.951, lng: 24.10, count: 2},
{id: 2, lat: 56.931, lng: 24.00, count: 2},
{id: 3, lat: 56.947, lng: 24.14, count: 3},
{id: 4, lat: 56.924, lng: 24.09, count: 2},
{id: 5, lat: 56.936, lng: 24.12, count: 2},
{id: 6, lat: 56.955, lng: 24.10, count: 4},
];
ctrl.openModal = function(event){
$state.go('welcome');
}
}
})();
和模板:
<div class="map_wrapper">
<ng-map default-style="false"
center="current-location"
geo-fallback-center="4.672585, -54.059525">
<marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal"></marker>
</ng-map>
</div>
但我得到錯誤:
TypeError: Cannot read property '1' of null
at new a (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28363)
at Object.getEvents (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:28734)
at Object.a [as link] (https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js:25:18317)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:16:230
at ia (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:81:35)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:66:176)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:429)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:58:67
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:62:430
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:59:422) <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal" class="ng-scope">
嘗試了各種方法並尋找了類似的問題,但是沒有運氣。 在示例頁面中,始終使用“舊”控制器方法。
由於以下行的無效click
事件聲明,您收到此錯誤:
on-click="$ctrl.openModal"
^^^^^^^^^
missing parentheses
標記click
事件聲明應包含括號: on-click="openModal()"
例
(function () { angular.module('mapApp', ['ngMap']) .controller('mapCtrl', function ($scope,NgMap) { NgMap.getMap().then(function (map) { $scope.map = map; }); $scope.markers = [ { id: 1, lat: 56.951, lng: 24.10, count: 2 }, { id: 2, lat: 56.931, lng: 24.00, count: 2 }, { id: 3, lat: 56.947, lng: 24.14, count: 3 }, { id: 4, lat: 56.924, lng: 24.09, count: 2 }, { id: 5, lat: 56.936, lng: 24.12, count: 2 }, { id: 6, lat: 56.955, lng: 24.10, count: 4 }, ]; $scope.openModal = function (e) { console.log(e.latLng.toString()); } }); })();
<script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> <div ng-app="mapApp" ng-controller="mapCtrl"> <ng-map default-style="false" center="56.9713958,23.9898323" zoom="10"> <marker ng-repeat="m in markers" position="{{m.lat}},{{m.lng}}" on-click="openModal($event)"></marker> </ng-map> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.