标记click事件不触发在地图控制器UI的GMAP标志物 [英] Marker click event not firing for ui-gmap-marker in Map Controller
本文介绍了标记click事件不触发在地图控制器UI的GMAP标志物的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有对谷歌地图的控制器的应用程序。当我的手机上运行它的Click事件不会触发。但是，单击事件触发，当我测试它的纹波模拟器。下面是地图页面和相应的控制器。
＆LT; ONS-工具栏＆GT;
＆LT; DIV CLASS =左＆GT;＆LT; ONS-后退按钮＆GT;返回＆LT; / ONS-后退按钮＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =中心页面标题＆GT;地图MapController2＆LT; / DIV＆GT;
＆LT; / ONS-工具栏＆GT;＆LT; UI-GMAP，谷歌地图中心=map.center刷新=真正的变焦=map.zoom拖动=真＆GT; ＆LT; UI-GMAP标志物idkey =marker.idNG重复=标志在map.markersCOORDS =标记图标=marker.icon点击=onMarkerClicked（）＆GT;
＆LT; UI-GMAP窗口显示=windowOptionsCOORDS =标记closeClick =closeClick＆GT;
＆LT; DIV的风格=颜色：黑＆GT;
{{marker.title}}＆LT; BR /＆GT;
在{{标记}}
＆LT; / DIV＆GT;
＆LT; / UI-GMAP窗口＆GT;
＆LT; / UI-GMAP-标记＆GT;＆LT; / UI-GMAP，谷歌地图＆GT;
//地图控制器
app.controller（'MapController2'，函数（$范围，$ rootScope，$ HTTP）{
VAR数据= {}; Data.Map中= {
变焦：12，
中央： {
纬度：27.949，
经度：-81.958
}，
标记：
{
ID：1，
图标：IMG / blue_marker.png'，
纬度：27.949，
经度：-81.999，
标题：这是你在哪里航空自卫队，航空自卫队LKJ; LJ;航空自卫队; lkasf; ; jasdfpoiarwtonmsad
}，
{
ID：2，
纬度：27.949，
经度：-81.958，
标题：招聘网站
}，
{
ID：3，
图标：IMG / plane.png'，
纬度：27.949，
经度：-81.94，
标题：机场
}]
}; $ scope.windowOptions = FALSE; $ scope.onMarkerClicked =功能（）{
！this.windowOptions = this.windowOptions;
}; $ scope.closeClick =功能（）{
this.windowOptions = FALSE;
}; $ scope.map = Data.Map中;
}）;
解决方案
我发现了很多后的溶液挖。我使用的HTML如下。我使用UI-GMAP标记物（以S）而不是UI-GMAP标志物。此外，我不得不封装谷歌地图数据抽头残疾=真让它在手机上正常工作。
＆LT; ONS-页面类=地图NG-控制器=MapController2滑动菜单忽略=真正的＆GT; ＆LT; ONS-工具栏＆GT;
＆LT; DIV CLASS =左＆GT;＆LT; ONS-后退按钮＆GT;返回＆LT; / ONS-后退按钮＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =中心页面标题＆GT;地图MapController＆LT; / DIV＆GT;
＆LT; / ONS-工具栏＆GT; ＆LT; UI-GMAP，谷歌地图中心=map.center刷新=真正的变焦=map.zoom拖动=真正的数据自来水禁用=真正的＆GT; ＆LT; UI-GMAP窗口显示=map.window.showCOORDS =map.window.model选项=map.window.optionscloseClick =map.window.closeClick（）＆GT;
＆LT; DIV的风格=颜色：黑＆GT;
{{map.window.title}}
＆LT; / DIV＆GT;
＆LT; / UI-GMAP窗口＆GT;
＆LT; UI-GMAP-标记idkey =marker.id模型=map.markersCOORDS ='自我'doCluster =false的契合=真图标=图标'事件= map.markersEvents选项='选项'＆GT;＆LT; / UI-GMAP-标记＆GT; ＆LT; / UI-GMAP，谷歌地图＆GT;＆LT; /附件页＆GT;
，然后控制器看起来是这样的：
//地图控制器
app.controller（'MapController2'，函数（$范围，$ rootScope，$ HTTP）{
VAR数据= {}; Data.Map中= {
变焦：12，
中央： {
纬度：27.949，
经度：-81.958
}，
标记：
{
ID：1，
图标：IMG / blue_marker.png'，
纬度：27.949，
经度：-81.999，
标题：这是你在哪里'
}，
{
ID：2，
纬度：27.949，
经度：-81.958，
标题：招聘网站
}，
{
ID：3，
图标：IMG / plane.png'，
纬度：27.949，
经度：-81.94，
标题：机场
}]，
markersEvents：{
点击：功能（标记，eventName的，型号，参数）{
的console.log（'标记被点击（+标记+'，'+ eventName的）; // +'，'+ mydump（型号，0）+'，'+ mydump（参数）+））;
$ scope.map.window.model =模型;
$ scope.map.window.model =模型;
$ scope.map.window.title = model.title;
$ scope.map.window.show = TRUE;
}
}，
窗口：{
标记：{}，
显示：假的，
closeClick：功能（）{
this.show = FALSE;
}，
选项：{} //定义地图时，准备好
标题：''
}
}; //$scope.window = FALSE; $ scope.onMarkerClicked =功能（M）{
！//this.windowOptions = this.windowOptions;
的console.log（'标记被点击'）;
的console.log（米）;
}; $ scope.closeClick =功能（）{
this.window = FALSE;
}; $ scope.map = Data.Map中; }）;
I have an app with a controller for the Google Map. The click event does not fire when I run it on my phone. However, the click event fires when I test it on the ripple emulator. Below is the map page and the corresponding 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;
});
解决方案
I found the solution after a lot on digging. The HTML I am using is below. I am using "ui-gmap-markers" (with an "s") instead of "ui-gmap-marker". Also, I had to encapsulate the Google map with ’data-tap-disabled="true"’ to get it to work on the phone.
<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>
And then the Controller looks like this:
// 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;
});
这篇关于标记click事件不触发在地图控制器UI的GMAP标志物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
