Google Maps API手势处理不适用于AngularJS材质 [英] Google Maps API gesture handling not working with AngularJS Material
问题描述
(当您将纯Google Maps API与AngularJS Material结合使用时，问题是相同的.)
( When you use plain Google Maps API with AngularJS Material the problem is the same.)
当我在AngularJS应用中同时使用时:
When I use at the same time in my AngularJS app:
- NgMap( https://github.com/allenhwkim/angularjs-google-maps)
- AngularJS材质( https://github.com/angular/material )
- NgMap (https://github.com/allenhwkim/angularjs-google-maps)
- AngularJS Material (https://github.com/angular/material)
地图无法在移动设备上正常工作(在台式机上可以)-问题在于触摸手势.示例:
Maps don't work properly on mobile (on desktop it is ok) - the problem is with touch gestures. Example:
https://incampo.pl/map2.html -(在移动设备上进行测试！)
https://incampo.pl/map2.html - (test on mobile!)
但是当我不使用材料时:
but when I don't use material:
angular.module("incampoApp", ["ngMap"])
代替:
angular.module("incampoApp", ["ngMap", "ngMaterial"])
它正常工作: https://incampo.pl/map.html -(在移动！)
it works properly: https://incampo.pl/map.html - (test on mobile!)
我的整个示例代码(由打字稿编译而成的JS):
My whole example code (JS compiled from typescript):
<!DOCTYPE html>
<html ng-app="incampoApp">
<head>
</head>
<body ng-controller="offerController as vm">
<div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyufiB6xUh1SzM7LK2NniXGDPyY__KtP8&callback=initMap">
<ng-map id="map" min-zoom="2" zoom="6" center="52.2,19"></ng-map>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script>
var IncampoApp;
(function (IncampoApp) {
var OfferController = (function () {
function OfferController(ngMap) {
ngMap.getMap();
}
OfferController.$inject = ["NgMap"];
return OfferController;
}());
IncampoApp.OfferController = OfferController;
})(IncampoApp || (IncampoApp = {}));
</script>
<script>
var IncampoApp;
(function (IncampoApp) {
angular.module("incampoApp", ["ngMap", "ngMaterial"]).controller("offerController", IncampoApp.OfferController);
})(IncampoApp || (IncampoApp = {}));
</script>
</body>
</html>
你知道为什么吗?
推荐答案
I've found the solution here: https://github.com/angular/material/issues/11205
您只需要调用$ mdGestureProvider.skipClickHijack();
You just need to call $mdGestureProvider.skipClickHijack();
angular.module('myapp', ['ngMaterial', 'ngMessages'])
.config(function($mdGestureProvider) {
// For mobile devices without jQuery loaded, do not
// intercept click events during the capture phase.
$mdGestureProvider.skipClickHijack();
});
这篇关于Google Maps API手势处理不适用于AngularJS材质的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
