Chrome问题与嵌入式谷歌地图 [英] Chrome issue with embedded Google Maps

问题描述

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

UPDATE

这个问题是在bug中处理的。 b
$ b

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

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

解决方案

我通过使用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如果（e.type ==vmousedown）{//重置所有值
 oldX = 0; oldY = 0; newX = 0; newY = 0; 
 （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）; 
} 
  

I'm using a touch screen desktop computer and I've set up one of the basic Google Maps examples on their website. When I try and pan in Chrome, it doesn't work, but in Firefox it does. Pinch to zoom does not work in either of them, but at maps.google.com, everything is functioning normally with the touch screen.

UPDATE

This issue was handled in the bug

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

and was solved in version 3.27 of Google Maps JavaScript API in December 2016.

解决方案

I solved it by simulating my own touch capability using JQuery Mobile(vmousemove event). Replace #map-element with the the name of the element containing the actual map. Also set map to the Google Maps object that allows you to pan. It works pretty well.

Note: I only needed this to work on Chrome, so I haven't tried any other browsers.

            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);
        }

这篇关于Chrome问题与嵌入式谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！