Google手势处理不使用AngularJS材料
Google手势处理不使用AngularJS材料
提问于 2018-10-01 14:07:47
(编辑:当您在AngularJS材料中使用普通Google时，问题是相同的。)
当我在我的AngularJS应用程序中同时使用：
- NgMap (https://github.com/allenhwkim/angularjs-google-maps)
- AngularJS材料(https://github.com/angular/material)
地图在移动设备上不能正常工作(在桌面上是可以的)--问题在于触摸手势。示例：
https://incampo.pl/map2.html -(手机测试！)
但当我不使用材料时：
angular.module("incampoApp", ["ngMap"])而不是：
angular.module("incampoApp", ["ngMap", "ngMaterial"])它工作正常：https://incampo.pl/map.html -(手机测试！)
我的整个示例代码(从类型记录编译而来的JS)：
<!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>你知道为什么吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-05 05:47:49
我在这里找到了解决方案：https://github.com/angular/material/issues/11205
只需调用$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();
});Stack Overflow用户
发布于 2018-10-02 06:58:50
试试这个：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.6095451920282!2d90.38946702923724!3d23.72563358206513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8dd3d3673e7%3A0xf999f4771c24183e!2sInstitute+of+AppropriateTechnology!5e0!3m2!1sen!2sbd!4v1519796378399" width="100%" height="450" frameborder="0" style="border: 0"></iframe>
这个解决方案可以帮助你，如果你想要简单的地图在你的html没有(谷歌地图键)。用iframe嵌入谷歌地图
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52592964
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号