嵌入式谷歌地图的 Chrome 问题答案

【问题标题】：Chrome issue with embedded Google Maps嵌入式谷歌地图的 Chrome 问题
【发布时间】：2013-06-13 18:12:26
【问题描述】：

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

更新

这个问题已经在bug中处理了

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

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

【问题讨论】：

遗憾的是，chrome 不支持捏缩放。如果有的话，这是浏览器的错，而不是你的代码。
它如何与 maps.google.com 一起使用？
你能告诉我你运行的是哪个版本的谷歌地图吗？
我刚刚访问了 maps.google.com 并捏合缩放作品，但没有嵌入地图。
我刚刚遇到这个 - 真烦人！

标签： javascript jquery html google-maps

【解决方案1】：

这是 Chrome 和 Windows 7、8 上的 Google 地图的问题（请参阅 #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>

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

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

【讨论】：

【解决方案2】：

我通过使用 JQuery Mobile(vmousemove event) 模拟我自己的触摸功能来解决它。将#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);
        }

【讨论】：