Javascript 如何在谷歌地图中设置缩放级别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11454229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:52:55  来源:igfitidea点击:

How to set zoom level in google map

javascriptgoogle-mapsgoogle-maps-api-3

提问by rockstar

Here is the code I have written to add a marker to the google map by providing latitude and longitude. The problem is that I get a very highly zoomed google map. I have tried setting the zoom level to 1 but this has no effect to the very highly zoomed map.

这是我编写的通过提供纬度和经度向谷歌地图添加标记的代码。问题是我得到了一张高度放大的谷歌地图。我曾尝试将缩放级别设置为 1,但这对高度缩放的地图没有影响。

 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
     <script type="text/javascript">
        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
                map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        });
        addMarker(27.703402,85.311668,'New Road');
        center = bounds.getCenter();
        map.fitBounds(bounds);

        }
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>

How can i decrease the level of zoom for this case?

在这种情况下,如何降低缩放级别?

回答by geocodezip

Your code below is zooming the map to fit the specified bounds:

您下面的代码正在缩放地图以适应指定的边界:

addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);

If you only have 1 marker and add it to the bounds, that results in the closest zoom possible:

如果您只有 1 个标记并将其添加到边界,则可能会产生最接近的缩放:

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
}

If you keep track of the number of markers you have "added" to the map (or extended the bounds with), you can only call fitBounds if that number is greater than one. I usually push the markers into an array (for later use) and test the length of that array.

如果您跟踪已“添加”到地图(或扩展边界)的标记数量,则只能在该数字大于 1 时调用 fitBounds。我通常将标记推入一个数组(供以后使用)并测试该数组的长度。

If you will only ever have one marker, don't use fitBounds. Call setCenter, setZoomwith the marker position and your desired zoom level.

如果您只有一个标记,请不要使用 fitBounds。打电话setCentersetZoom用标记位置和您所需的缩放水平。

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  map.setCenter(pt);
  map.setZoom(your desired zoom);
}

回答by Rahul Shinde

What you're looking for are the scales for each zoom level. The numbers are in metres. Use these:

您正在寻找的是每个缩放级别的比例。数字以米为单位。使用这些:

20 : 1128.497220

20 : 1128.497220

19 : 2256.994440

19 : 2256.994440

18 : 4513.988880

18 : 4513.988880

17 : 9027.977761

17 : 9027.977761

16 : 18055.955520

16 : 18055.955520

15 : 36111.911040

15 : 36111.911040

14 : 72223.822090

14 : 72223.822090

13 : 144447.644200

13 : 144447.644200

12 : 288895.288400

12 : 288895.288400

11 : 577790.576700

11 : 577790.576700

10 : 1155581.153000

10 : 1155581.153000

9 : 2311162.307000

9 : 2311162.307000

8 : 4622324.614000

8 : 4622324.614000

7 : 9244649.227000

7 : 9244649.227000

6 : 18489298.450000

6 : 18489298.450000

5 : 36978596.910000

5 : 36978596.910000

4 : 73957193.820000

4 : 73957193.820000

3 : 147914387.600000

3 : 147914387.600000

2 : 295828775.300000

2 : 295828775.300000

1 : 591657550.500000

1 : 591657550.500000

回答by Anup

For zooming your map two level then just add this small code of line map.setZoom(map.getZoom() + 2);

要将地图放大两级,只需添加此小行代码 map.setZoom(map.getZoom() + 2);

回答by Bas Slagter

Here is a function I use:

这是我使用的一个函数:

var map =  new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(52.2, 5),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 7
        });

function zoomTo(level) {
        google.maps.event.addListener(map, 'zoom_changed', function () {
            zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
                if (this.getZoom() > level && this.initialZoom == true) {
                    this.setZoom(level);
                    this.initialZoom = false;
                }
                google.maps.event.removeListener(zoomChangeBoundsListener);
            });
        });
    }

回答by Mahmoud Ayman

These methods worked for me, it maybe useful for anyone: MapOptions interface

这些方法对我有用,可能对任何人都有用: MapOptions 接口

set min zoom:mMap.setMinZoomPreference(N);

设置最小缩放:mMap.setMinZoomPreference(N);

set max zoom:mMap.setMaxZoomPreference(N);

设置最大缩放:mMap.setMaxZoomPreference(N);

where N can equal to:

其中 N 可以等于:

20 : 1128.497220

20 : 1128.497220

19 : 2256.994440

19 : 2256.994440

18 : 4513.988880

18 : 4513.988880

17 : 9027.977761

17 : 9027.977761

16 : 18055.955520

16 : 18055.955520

15 : 36111.911040

15 : 36111.911040

14 : 72223.822090

14 : 72223.822090

13 : 144447.644200

13 : 144447.644200

12 : 288895.288400

12 : 288895.288400

11 : 577790.576700

11 : 577790.576700

10 : 1155581.153000

10 : 1155581.153000

9 : 2311162.307000

9 : 2311162.307000

8 : 4622324.614000

8 : 4622324.614000

7 : 9244649.227000

7 : 9244649.227000

6 : 18489298.450000

6 : 18489298.450000

5 : 36978596.910000

5 : 36978596.910000

4 : 73957193.820000

4 : 73957193.820000

3 : 147914387.600000

3 : 147914387.600000

2 : 295828775.300000

2 : 295828775.300000

1 : 591657550.500000

1 : 591657550.500000