Question

希望你能帮忙...我有点难过......基本上，我有一张谷歌地图，自动完成工作。您搜索原点和目的地，并在地图上显示正确的设置过滤结果/标记。

然而，当我在手机上查看我的地图时，通过chrome / safari，地图不会移动，你根本无法与它互动。

我用谷歌搜索并理解我需要手势处理：合作＆＃39;。但是，由于我的应用程序是在anjular JS中构建的，而我的谷歌地图代码是在一个指令中，我不知道在哪里放置这个...

这是我的指令的相关片段：

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：＆＃39;合作＆＃39;}进入＆＃34;返回＆＃34;时，我的地图仍然无法在移动设备上工作。

我甚至试过在我的指令中输入以下代码。不行。 map.setOptions（{gestureHandling：＆＃39; cooperative＆＃39;}）;

以下是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>

有点难过我无法正常工作！

谢谢，里纳

Answer 1

感谢您回复我。它转变为问题是由CSS引起的。地图上的zindex设置为-1。它基本上阻止了地图的工作......

感谢您的回复！

Answer 2

尝试

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>

谷歌地图...手机上的gestureHandling无法正常工作

2 个答案: