Question

我在我的网站上使用google-maps-api v3嵌入了谷歌地图。我正在尝试使用触摸屏电视来放大和缩小地图，但它会不断调整浏览器窗口的大小。我正在使用Firefox。

http://www.spectrumgeo.com/mcmap/large.php

以下代码阻止使用键盘ctrl (-/+)

进行缩放

$(document).keydown(function(event) {
            if (event.ctrlKey==true && (event.which == '107' || event.which == '109')) {
                alert('disabling zooming ! ');
                event.preventDefault();
             }
        });

我已经尝试锤子作为mnentioned here但是不起作用。

var myElement = document.getElementById('googlemap');

        var mc = new Hammer.Manager(myElement);

        // create a pinch and rotate recognizer
        // these require 2 pointers
        var pinch = new Hammer.Pinch();
        var rotate = new Hammer.Rotate();

        // we want to detect both the same time
        pinch.recognizeWith(rotate);

        // add to the Manager
        mc.add([pinch, rotate]);

        mc.on("panleft panright tap press", function(ev) {
            //myElement.textContent = ev.type +" gesture detected.";
            alert(ev.type +" ");
        });

        mc.on("pinch rotate", function(ev) {
            //myElement.textContent += ev.type +" ";
            alert(ev.type +" ");
        });

Answer 1

经过大量研究和阅读大量博客这可以通过欺骗用户代理或设置导航器的msMaxTouchPoints属性来实现。这是受到Brian（https://github.com/bamnet/map_sandbox/tree/master/forceTouchUI）解决方案的启发，他在那里欺骗用户代理。我通过设置navigator.msMaxTouchPoints属性进行了一些修改以使其工作，如JsFiddle示例所示

这就是我们最终做的事情

function EnableTouchUI(){
  // Check if the browser supports touch events
  if('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) {
    	navigator = navigator || {};
	navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
  }
}

jQuery(document).ready(function(){
	EnableTouchUI();
});

在这里查看工作示例 https://jsfiddle.net/abidCharlotte49er/qLn8hkv0/

Answer 2

根据documentation，只有移动设备会有触控功能。似乎没有设置来启用它。但是，您可以将用户代理设置为Android平板电脑以启用它。

谷歌地图捏不工作在触摸屏电视

2 个答案: