使用 angular google 地图时如何正确处理标记点击事件?
How to properly handle marker on-click event when using angular google maps?
我想在我的 ASP.NET MVC 应用程序中使用 Angular Google 地图 (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-markers 和 ui-gmap-window?文档很差,唯一的例子是 ui-gmap-marker...
你试过了吗:
ng-click="markerClick($event)"
我在 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: {}
}
};
});
笨蛋:http://plnkr.co/edit/HUYHuAUgUlUhDd1MRf3D?p=preview
唯一的问题是 window 准确显示在图钉的位置,而不是图钉上方。有谁知道我该如何解决这个问题?不好看...
编辑:
这解决了 window:
的问题
uiGmapGoogleMapApi.then(function (maps) {
// offset to fit the custom icon
$scope.map.window.options.pixelOffset = new google.maps.Size(0, -35, 'px', 'px');
});
我认为这就是您尝试的方式,在您原来的问题中去掉括号,您将获得三个变量:
标记的文档说:
PerModel / or expression binding : event handler executed when clicking a marker. If you provide a function name (e.g. 'markerClick'), you will get three different parameters:
the instance of the generated google.maps.Marker you clicked;
the event name;
the exact clicked marker object you have in the models.
我也在做你用标记做的事情,但我想我会用标记试一试,即使文档在标记下。
在我的 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 地图实例、名称 "click" 和一个带有我的 ID 的标记,这正是我需要的。
希望对您有所帮助。
我想在我的 ASP.NET MVC 应用程序中使用 Angular Google 地图 (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-markers 和 ui-gmap-window?文档很差,唯一的例子是 ui-gmap-marker...
你试过了吗:
ng-click="markerClick($event)"
我在 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: {}
}
};
});
笨蛋:http://plnkr.co/edit/HUYHuAUgUlUhDd1MRf3D?p=preview
唯一的问题是 window 准确显示在图钉的位置,而不是图钉上方。有谁知道我该如何解决这个问题?不好看...
编辑: 这解决了 window:
的问题uiGmapGoogleMapApi.then(function (maps) {
// offset to fit the custom icon
$scope.map.window.options.pixelOffset = new google.maps.Size(0, -35, 'px', 'px');
});
我认为这就是您尝试的方式,在您原来的问题中去掉括号,您将获得三个变量:
标记的文档说:
PerModel / or expression binding : event handler executed when clicking a marker. If you provide a function name (e.g. 'markerClick'), you will get three different parameters: the instance of the generated google.maps.Marker you clicked; the event name; the exact clicked marker object you have in the models.
我也在做你用标记做的事情,但我想我会用标记试一试,即使文档在标记下。
在我的 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 地图实例、名称 "click" 和一个带有我的 ID 的标记,这正是我需要的。
希望对您有所帮助。