嵌入式Google地图的Chrome问题

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

UPDATE

这个问题是在bug中处理的

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

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

Answer 1

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

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

  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库来重新创建捏合function。

 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 }