0

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

更新

此问题已在 bug 中处理

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

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

4

2 回答 2

0

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

注意：我只需要在 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);
        }
于 2014-03-27T15:15:09.733 回答
0

这是 Chrome 和 Windows 7、8 上的 Google Map 的问题（参见#6425）。

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

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);
 html,
 body,
 #map-canvas {
   height: 100%;
   margin: 0px;
   padding: 0px
 }
<!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>

这仅处理捏合手势，可能需要一些调整。

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

于 2015-06-24T14:04:26.260 回答