[英]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.