(EDIT: когда вы используете простой API Карт Google с материалом AngularJS, проблема та же.)
Когда я использую одновременно в своем приложении 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>
У вас есть идеи, почему?