如何将谷歌地图中的放大/缩小限制为给定的指定值

How to restrict zoom in/out in Google Map to a given specified value?

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

我在PHP网站中包含了一个地图。这些是我将地图居中放置在这个位置的细节（9.0609902,76.5341999）

我已将缩放级别设置为6。我对JavaScript不太熟悉。我不想放大地图。我想将缩放级别限制为最大值6&不希望允许用户进行更多缩放。也就是说，我不希望缩放参数的值超过6。最大缩小级别应为2。

我的地图代码：

<script>
    function initialize()
    {
        var laa=9.0609902;
        var lon=76.5341999;
        var myLatlng=new google.maps.LatLng(laa,lon);
        var mapProp = {
            center: new google.maps.LatLng(laa,lon),
            zoom:6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        var image = 'mapmarkers/you-are-here-2.png';
        var opt = { minZoom: 6, maxZoom: 9 };
        mapProp.setOptions(opt);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'I am Here.',
            icon: image
        });
    }
    function loadScript()
    {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }
    window.onload = loadScript;
</script>

这在我的地图上不起作用。为什么？

var opt = { minZoom: 6, maxZoom: 9 };
mapProp.setOptions(opt);

然后试试这个：

<script>
    //map included.
    function initialize()
    {
        var myLatlng=new google.maps.LatLng(laa,lonn);
        var mapProp = {
            center: new google.maps.LatLng(laa,lonn),
            zoom:6,
            maxZoom: 6,
            minZoom:2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        var image = 'mapmarkers/you-are-here-2.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'I am Here.',
            icon: image
        });
    }
    function loadScript()
    {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }
    window.onload = loadScript;
</script>

<script>
//map included.
function initialize()
{
    var myLatlng=new google.maps.LatLng(laa,lonn);
    var mapProp = {
        center: new google.maps.LatLng(laa,lonn),
        zoom:6,
        maxZoom: 6,
        minZoom:2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
    var image = 'mapmarkers/you-are-here-2.png';
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'I am Here.',
        icon: image
    });
}
function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
    document.body.appendChild(script);
}
window.onload = loadScript;

相关文章：