在移动设备的谷歌地图上禁用可拖动

disable draggable on google maps in mobile

本文关键字：拖动 谷歌地图 移动      更新时间：2023-09-26

我想禁用平板电脑和移动设备中的地图拖动

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

虽然这是行不通的..让我知道

在开头使用全局变量，例如 

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

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

您也可以直接添加它

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

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

如果您可以"单击"地图而不是按钮，那就更好了。苹果新的"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);
    }
});

只需在 myOptions 对象中添加以下内容即可进行地图设置：

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

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

另一种选择是：

var sw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = sw > 1024 ? true : false;
var mapOptions = {
  draggable: isDraggable,
  scrollwheel: false
};

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

相关文章：