Question

我想禁用在平板电脑和手机中拖动地图

var myOptions = {
                    zoom: 5,
                    scrollwheel: false,
                    center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

在页面加载

这工作正常.. 但我想禁用移动设备。

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}

这不起作用..我知道

Answer 1

在开头使用全局变量，如

var drgflag=true;

然后使用您的移动检测代码，其中dragflag将设置为false

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}

然后你可以初始化你的地图

var myOptions = {
                    zoom: 5,
                    scrollwheel: false,
                    draggable:drgflag,
                    center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

我希望您的移动检测代码有效..

Answer 2

您也可以直接添加

var myOptions = {
                zoom: 5,
                scrollwheel: false,
                center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                draggable: false,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

Answer 3

此人[包含链接]添加了一个按钮，仅启用/禁用移动设备。

如果您可以“点击”地图而不是按钮，那就更好了。 Apple的新“3D Touch”将非常适合这一点，因为更难以激活地图的拖动行为。

也许您可以根据您所处的模式将地图的样式调整为更浅或更暗的色调？

https://gist.github.com/danhannigan/36d61b74ea457224b746

$( ".scroll-lock" ).click(function() {
  $( this ).toggleClass( "locked" );
    if ($(this).hasClass("locked")) {
        map.set('draggable', false);
    } else {
        map.set('draggable', true);
    }
});

Answer 4

只需在地图设置的myOptions对象中添加以下内容：

driver.findElement(By.xpath("code']")).sendKeys("testdata");

检查“ontouchend”事件是否存在，如果是，则表示触摸设备，因此禁用拖动。然而，在带触摸屏的笔记本电脑上，事情变得有点复杂。

另一种选择是：

var myOptions = {
     ...
     draggable: !("ontouchend" in document),
     ...
}

您基本上检查屏幕的宽度，如果它在平板电脑的宽度范围内，则禁用拖动。

在移动设备上停用Google地图上的可拖动功能

4 个答案: