地图控制器中ui-gmap-marker的标记点击事件未触发
Marker click event not firing for ui-gmap-marker in Map Controller
我有一个带有谷歌地图控制器的应用程序。当我在手机上运行它时,点击事件不会触发。但是,当我在纹波模拟器上测试它时,单击事件会触发。下面是映射页面和相应的控制器。
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center page-title">Map MapController2</div>
</ons-toolbar>
<ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true">
<ui-gmap-marker idkey="marker.id" ng-repeat="marker in map.markers" coords="marker" icon="marker.icon" click="onMarkerClicked()">
<ui-gmap-window show="windowOptions" coords="marker" closeClick="closeClick">
<div style="color: black">
{{marker.title}}<br/>
at {{marker}}
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
// Map Controller
app.controller('MapController2', function($scope, $rootScope, $http) {
var data = {};
data.map = {
zoom: 12,
center: {
latitude: 27.949,
longitude: -81.958
},
markers: [
{
id: 1,
icon: 'img/blue_marker.png',
latitude: 27.949,
longitude: -81.999,
title: 'This is where you are asdf;lkj asdf;lj ;asdf;lkasf; ;jasdfpoiarwtonmsad'
},
{
id: 2,
latitude: 27.949,
longitude: -81.958,
title: 'Job Site'
},
{
id: 3,
icon: 'img/plane.png',
latitude: 27.949,
longitude: -81.94,
title: 'Airport'
}]
};
$scope.windowOptions = false;
$scope.onMarkerClicked = function () {
this.windowOptions = !this.windowOptions;
};
$scope.closeClick = function () {
this.windowOptions = false;
};
$scope.map = data.map;
});
经过一番挖掘,我找到了解决方案。我使用的HTML如下所示。我使用"ui-gmap-marker"(带有"s")而不是"ui-gmap-marker"。此外,我必须用' data-tap-disabled= " true " '封装谷歌地图,以使其在手机上工作。
<ons-page class="map" ng-controller="MapController2" sliding-menu-ignore="true">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center page-title">Map MapController</div>
</ons-toolbar>
<ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true" data-tap-disabled="true">
<ui-gmap-window show="map.window.show" coords="map.window.model" options="map.window.options" closeClick="map.window.closeClick()">
<div style="color: black">
{{map.window.title}}
</div>
</ui-gmap-window>
<ui-gmap-markers idkey="marker.id" models="map.markers" coords="'self'" doCluster="false" fit="'true'" icon="'icon'" events="map.markersEvents " options="'options'"></ui-gmap-markers>
</ui-gmap-google-map>
</ons-page>
然后控制器看起来像这样:
// Map Controller
app.controller('MapController2', function($scope, $rootScope, $http) {
var data = {};
data.map = {
zoom: 12,
center: {
latitude: 27.949,
longitude: -81.958
},
markers: [
{
id: 1,
icon: 'img/blue_marker.png',
latitude: 27.949,
longitude: -81.999,
title: 'This is where you are'
},
{
id: 2,
latitude: 27.949,
longitude: -81.958,
title: 'Job Site'
},
{
id: 3,
icon: 'img/plane.png',
latitude: 27.949,
longitude: -81.94,
title: 'Airport'
}],
markersEvents: {
click: function(marker, eventName, model, arguments) {
console.log('Marker was clicked (' + marker + ', ' + eventName);//+', '+mydump(model, 0)+', '+mydump(arguments)+')');
$scope.map.window.model = model;
$scope.map.window.model = model;
$scope.map.window.title = model.title;
$scope.map.window.show = true;
}
},
window: {
marker: {},
show: false,
closeClick: function() {
this.show = false;
},
options: {}, // define when map is ready
title: ''
}
};
//$scope.window = false;
$scope.onMarkerClicked = function (m) {
//this.windowOptions = !this.windowOptions;
console.log('Marker was clicked');
console.log(m);
};
$scope.closeClick = function () {
this.window = false;
};
$scope.map = data.map;
});
相关文章:
- 从控制器返回后Ajax启动事件激发
- 事件的ExtJS控制器选择器
- 将谷歌地图点击事件中的LatLng传递到rails控制器
- 在将绑定应用于控制器之后,是否会发出Angular$scope事件
- Angularjs:从多个控制器捕获事件
- angularjs调用事件中控制器的一个函数
- 如何使用onclick事件调用AngularJS控制器
- 在控制器中创建StandardListItem并在赢得的项目上按下事件'不要开火
- MVC 下拉列表更改事件未正确调用控制器中的操作
- 指定父文档按钮点击事件来自Angular JS中的子文档控制器
- 如何在Javascript事件上触发rails控制器操作
- 收听角度控制器中的phonegap背景事件
- Angular:$scope有效,但“;控制器为“;不触发ng更改事件
- AngularJS:一个控制器中更新不同控制器中的值的事件
- Wijemo事件日历绑定到角度控制器
- 一个控制器如何在 Ember .js 中观察任意控制器/模型上的事件
- 在一个控制器 ui 路由器中的所有 $state.go() 事件之前运行 check
- 如何从视图中触发事件(自定义事件)并在 Ext JS 的控制器中处理它们
- angular broastcast事件控制器未就绪
- 在Angular中重新加载/初始化事件控制器