禁用使用 JavaScript 在谷歌地图中捏合和放大

disable pinch and zoom in google maps using JavaScript?

本文关键字：放大 谷歌地图 JavaScript      更新时间：2023-09-26

>我正在我的一个项目中使用谷歌地图，但我不想在地图中产生缩放效果，所以我通过以下方式禁用了它 

zoomControl: false,

但是，这仅适用于台式机和笔记本电脑，因为它们不支持多点触控。

当我在平板电脑或智能手机等支持多点触控的设备中查看地图时，我可以使用捏合和缩放设备进行放大。

我确实尝试了map2.getUiSettings().setZoomControlsEnabled(false);它没有影响，我仍然可以捏合和缩放！

我也尝试map.getUiSettings().setZoomControlsEnabled(false);看看这是否有任何不同，但事实并非如此！

有人可以就此问题提供建议吗？

这是我的完整代码：

                <script>

            function showCurrentLocation(position) {
                var latitude = <?php echo $curLat; ?>;
                var longitude = <?php echo $curLon; ?>;
    var coords2 = new google.maps.LatLng(latitude, longitude);

    var mapOptions2 = {
        zoom: 10,
        center: coords2,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControl: false,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //create the map, and place it in the HTML map div
    map2 = new google.maps.Map(
    document.getElementById("mapPlaceholder"), mapOptions2);
    //place the initial marker
    var marker2 = new google.maps.Marker({
        position: coords2,
        map: map2,
        title2: "Current location!"
    });
}
google.maps.event.addDomListener(window,'load',showCurrentLocation);
map2.getUiSettings().setZoomControlsEnabled(false);
        </script>

任何帮助将不胜感激。

您可能想尝试： 

var tblock = function (e) {
    if (e.touches.length > 1) {
        e.preventDefault()
    }
    return false;
}
document.body.addEventListener("touchmove", tblock, true);

相关：

在谷歌地图上禁用捏缩放 [桌面]

谷歌地图API v3禁用捏合缩放在iPad Safari上

编辑（安卓4.4.2上的工作示例）： 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #mapPlaceholder {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
      var map2;
      function initialize() {
        var coords2 = new google.maps.LatLng(38.8, -77);
            var mapOptions2 = {
                zoom: 10,
                center: coords2,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControl: false,
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                draggable: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //create the map, and place it in the HTML map div
            map2 = new google.maps.Map(document.getElementById("mapPlaceholder"), mapOptions2);
            //place the initial marker
            var marker2 = new google.maps.Marker({
                position: coords2,
                map: map2,
                title: "Current location!"
            });
             var tblock = function (e) {
            if (e.touches.length > 1) {
                e.preventDefault()
            }
            return false;
        }
        document.body.addEventListener("touchmove", tblock, true);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="mapPlaceholder"></div>
</body>
</html>

将以下代码添加到 mapOptions： 

minZoom: 10,
maxZoom: 10

基本上，将 minZoom 和 maxZoom 设置为相同的值以禁用地图上的缩放。

相关文章：