Question

我正在使用触摸屏台式电脑，并在其网站上设置了一个基本的Google地图示例。当我尝试在Chrome中平移时，它不起作用，但在Firefox中它可以。捏缩放在其中任何一个中都不起作用，但在maps.google.com上，一切都在触摸屏上正常运行。

更新

此问题已在错误中处理

https://issuetracker.google.com/issues/35824421

并于2016年12月在Google Maps JavaScript API 3.27版中得到解决。

Answer 1

我通过使用JQuery Mobile（vmousemove事件）模拟我自己的触摸功能来解决它。将#map-element替换为包含实际地图的元素的名称。同时将map设置为允许您平移的Google地图对象。它运作得很好。

注意：我只需要在Chrome上使用此功能，因此我还没有尝试过任何其他浏览器。

            var mouseIsDown = false;
            var oldX = 0; var oldY = 0;
            var newX = 0; var newY = 0;
            var toid;
            $("#map-element").on("vmousemove vmousedown", function(e) {
                clearTimeout(toid);
                if (e.target.id == "map-div") {
                    if (e.type == "vmousedown") { // resets all values
                        oldX = 0; oldY = 0; newX = 0; newY = 0;
                        mouseIsDown = true;
                    }

                if (mouseIsDown) {
                    if (newX != 0 && newY != 0) {
                        oldX = newX;
                        oldY = newY;

                        newX = e.pageX;
                        newY = e.pageY;

                        map.panBy(-(newX - oldX), -(newY - oldY));
                    } else {
                        newX = e.pageX;
                        newY = e.pageY;
                    }       

                }

            toid = setTimeout(function() {
                mouseIsDown = false;
            }, 100);
        }

Answer 2

这是Chrome和Windows 7,8上的谷歌地图的问题（见#6425）。

另一个解决方案是使用hammer.js触摸手势javascript库来重新创建捏合功能。

＆＃13;

var map;

function initialize() {

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {
      lat: -34.397,
      lng: 150.644
    }
  });

  var mc = new Hammer(document.getElementById('map-canvas'));
  mc.get('pinch').set({
    enable: true
  });
  var scale, zoom;
  mc.on('pinchstart', function(ev) {
    scale = ev.scale;
    zoom = map.getZoom();
  });
  mc.on('pinch', function(ev) {
    if (scale) {
      var delta = (scale - ev.scale);
      map.setZoom(Math.round(zoom - delta));
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

 html,
 body,
 #map-canvas {
   height: 100%;
   margin: 0px;
   padding: 0px
 }

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <div id="map-canvas"></div>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script src="https://hammerjs.github.io/dist/hammer.js"></script>
</body>

</html>

＆＃13;

这只会处理捏合手势，可能需要进行一些调整。

另请参阅我对this question的回答，了解使用用户代理欺骗的解决方法

嵌入式Google地图的Chrome问题

2 个答案: