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

时间:2014-08-29 10:11:45

标签: javascript php google-maps google-maps-api-3

我在PHP网站上添加了一张地图。这些是我在这个位置集中地图的细节(9.0609902,76.5341999)。

我已将缩放级别设置为6.我对JavaScript并不熟悉。我不想放大到地图。我想将缩放级别限制为最大值6&不想让用户放大更多。也就是说,我不希望zoom参数的值大于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);

2 个答案:

答案 0 :(得分:1)

然后试试这个:

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

答案 1 :(得分:0)

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