谷歌地图...移动设备上的gestureHandling不工作
谷歌地图...移动设备上的gestureHandling不工作
提问于 2018-03-22 06:21:11
希望你能帮上忙。我有点困惑..。基本上，我有一个谷歌地图，与自动补全工作。您搜索一个起点和目的地，我设置的正确过滤结果/标记就会出现在地图上。
但是，当我通过chrome/safari在移动设备上查看我的地图时，地图不会移动，您也无法与其进行交互。
我已经在谷歌上搜索过了，我知道我需要gestureHandling：“合作”。然而，由于我的应用程序是用anjular构建的，而我的google地图代码位于一个指令中，我不知道该把它放在哪里……
下面是我的指令的相关片段：
googleMap.$inject = [];
function googleMap() {
return {
restrict: 'E',
template: '<div class="google-map"></div>',
replace: true,
scope: {
center: '=',
zoom: '=',
origin: '=',
destination: '=',
travelMode: '=',
foodType: '='
// gestureHandling: '='
},
link($scope, $element) {
const map = new google.maps.Map($element[0], {
zoom: $scope.zoom,
center: $scope.center,
// gestureHandling: 'cooperative',
});
map.setOptions({gestureHandling: 'cooperative'});
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
const placesService = new google.maps.places.PlacesService(map);
const directionsShow = document.getElementById('bottom-panel');
const image = {
url: '/assets/images/marker.gif', // url
scaledSize: new google.maps.Size(60, 60), // scaled size
origin: new google.maps.Point(0,0) // origin
};
directionsDisplay.setMap(map);然而，当我将{gestureHandling：'cooperative'}放到"return“中时，我的地图仍然无法在移动设备上工作。
我甚至尝试过在我的指令中插入以下代码。不起作用。合作({gestureHandling：‘map.setOptions’})；
这是google地图在我的视图文件夹中的样子。我甚至试着把它放在这里...
<google-map zoom="14" center="{ lat: 51.513172, lng: -0.111997 }"
origin="pagesHome.origin" destination="pagesHome.destination" travel-
mode="pagesHome.travelMode" food-type="pagesHome.foodType">
</google-map>有点被难住了，我不能让它工作！
谢谢，莉娜
回答 2
Stack Overflow用户
发布于 2018-03-22 20:09:19
谢谢你回来找我。结果是这个问题是由CSS引起的。地图上的zindex设置为-1。它基本上停止了地图的工作...
不过，还是要感谢你的回复！
Stack Overflow用户
发布于 2018-03-22 09:38:53
试一试
googleMap.$inject = [];
function googleMap() {
return {
restrict: 'E',
template: '<div class="google-map"></div>',
replace: true,
scope: {
center: '=',
zoom: '=',
origin: '=',
destination: '=',
travelMode: '=',
foodType: '=',
gestureHandling: '='
},
link($scope, $element) {
const map = new google.maps.Map($element[0], {
zoom: $scope.zoom,
center: $scope.center,
gestureHandling: $scope.gestureHandling
});
//map.setOptions({gestureHandling: 'cooperative'});
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
const placesService = new google.maps.places.PlacesService(map);
const directionsShow = document.getElementById('bottom-panel');
const image = {
url: '/assets/images/marker.gif', // url
scaledSize: new google.maps.Size(60, 60), // scaled size
origin: new google.maps.Point(0,0) // origin
};
directionsDisplay.setMap(map);HTML
<google-map zoom="14" center="{ lat: 51.513172, lng: -0.111997 }"
origin="pagesHome.origin" destination="pagesHome.destination" travel-
mode="pagesHome.travelMode" food-type="pagesHome.foodType" gesture-handling="cooperative">
</google-map>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49417477
复制相关文章
相似问题
腾讯云开发者
