Google Maps API 手势处理不适用于 AngularJS Material答案

【问题标题】：Google Maps API gesture handling not working with AngularJS MaterialGoogle Maps API 手势处理不适用于 AngularJS Material
【发布时间】：2018-10-01 14:07:47
【问题描述】：

（编辑：当您将普通的 Google Maps API 与 AngularJS Material 一起使用时，问题是一样的。）

当我在我的 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 - （在移动设备上测试！）

我的整个示例代码（从 typescript 编译的 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>

你知道为什么吗？

【问题讨论】：

标签： angularjs google-maps angularjs-material ng-map

【解决方案1】：

我在这里找到了解决方案：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();
  });

【讨论】：

【解决方案2】：

试试这个：

 &lt;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"&gt;&lt;/iframe&gt;

如果您想要在没有（Google 地图键）的情况下在您的 html 中使用简单的地图，此解决方案可能会对您有所帮助。 Embed Google Map with iframe

【讨论】：

仅链接的答案不是最好的...如果链接失效，此答案无用，因此请在您的答案中报告链接内容。
知道了。谢谢。
谢谢，但我需要使用 API，因为我需要多个标记等。