gpt4 book ai didi

javascript - 使用 Angular 谷歌地图时如何正确处理标记点击事件?

转载 作者:行者123 更新时间:2023-11-30 07:57:40 25 4
gpt4 key购买 nike

我想在我的 ASP.NET MVC 应用程序中使用 Angular Google map ( http://angular-ui.github.io/angular-google-maps )。我有一张 map ,我有标记,并且 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(仅来 self 的 Controller 的相关 markerClick):

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

编辑:这个问题也可以用另一种方式提出。如何正确使用 ui-gmap-markers 和 ui-gmap-window?文档很差,唯一的例子是 ui-gmap-marker...

最佳答案

我在 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

唯一的问题是窗口恰好显示在图钉的位置,而不是图钉上方。有谁知道我该如何解决这个问题?看起来不太好……

编辑:这解决了窗口的问题:

uiGmapGoogleMapApi.then(function (maps) {
// offset to fit the custom icon
$scope.map.window.options.pixelOffset = new google.maps.Size(0, -35, 'px', 'px');
});

关于javascript - 使用 Angular 谷歌地图时如何正确处理标记点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36021670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com