Javascript 映射控制器中ui gmap标记的标记单击事件未触发
我有一个带有谷歌地图控制器的应用程序。单击事件在我的手机上运行时不会触发。但是,当我在ripple emulator上测试它时,会触发click事件。下面是地图页面和相应的控制器Javascript 映射控制器中ui gmap标记的标记单击事件未触发,javascript,angularjs,google-maps,google-maps-api-3,Javascript,Angularjs,Google Maps,Google Maps Api 3,我有一个带有谷歌地图控制器的应用程序。单击事件在我的手机上运行时不会触发。但是,当我在ripple emulator上测试它时,会触发click事件。下面是地图页面和相应的控制器 <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center page-title">Map MapControll
<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>
经过大量的挖掘,我找到了解决办法。下面是我正在使用的HTML。我使用的是“UIGMAP标记”(带“s”)而不是“UIGMAP标记”。此外,我还必须用“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>
这是一款混合应用程序,包含:
离子和角材料
?如果是这样,那么使用任何版本的ionic+angular material v7.1及更高版本都会出现一些问题,并且ng单击不起作用。非常感谢。它是离子型和角型的。我是个新手。我使用的是点击而不是ng点击,如果这有区别的话。我从一个没有相同问题的模板构建了我的应用程序,这很奇怪。我不确定我是否遇到了与您相同的问题,但我让marker click基本上登录到控制台中,但是更改没有应用到视图中。我通过使用$scope.$apply()结束由标记触发的单击函数来解决这个问题。您可以使用选项属性中的{pixelOffset:{width:0,height:-40}}
在ui gmap窗口中指定偏移量,例如,我们可以使用plunkr吗?
<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;
});