堆栈内存溢出
  简体   繁体   English

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

[英]How to set zoom level in google map

 原文  2012-07-12 14:36:57  8   6    javascript/ google-maps/ google-maps-api-3

问题描述

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?我怎样才能降低这种情况下的缩放级别？

6 个解决方案

解决方案1
 126 已采纳  2012-07-12 15:09:38

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.如果您跟踪已“添加”到地图（或扩展边界）的标记数，则只能在该数字大于 1 时调用 fitBounds。 I usually push the markers into an array (for later use) and test the length of that array.我通常将标记推入一个数组（供以后使用）并测试该数组的长度。

If you will only ever have one marker, don't use fitBounds.如果您只有一个标记，请不要使用 fitBounds。 Call setCenter , setZoom with the marker position and your desired zoom level.使用标记位置和所需的缩放级别调用setCenter 、 setZoom 。

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


 html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; }
 <html> <head> <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" 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); map.setCenter(pt); map.setZoom(5); 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>

解决方案2
 30  2012-07-12 14:40:16

map.setZoom(zoom:number)

https://developers.google.com/maps/documentation/javascript/reference#Map https://developers.google.com/maps/documentation/javascript/reference#Map

解决方案3
 22  2015-08-15 18:36:59

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

解决方案4
 14  2013-07-05 13:57:46

For zooming in your map two levels, add this small line of code,要将地图放大两个级别，请添加这一小行代码，

map.setZoom(map.getZoom() + 2);

解决方案5
 6  2012-07-12 14:41:58

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

解决方案6
 2  2019-03-19 13:21:53

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何设置Google地图缩放级别以显示所有标记？ - How to set the Google Map zoom level to show all the markers? 如何在Google地图中设置25公里的缩放级别？ - how to set zoom level in 25km in google map? 为每个级别缩放谷歌地图设置事件？ - Set event for each level zoom google map? 如何在 Div 中显示 Google 地图缩放级别 - How to display Google Map zoom level in Div 如何将Google Map缩放级别提高到23 - How to get Google Map zoom level to 23 根据不同的纬度和经度设置谷歌地图的缩放级别 - Set zoom level of google map based on different lat and long 如何设置Google Map缩放级别以在中心显示所有标记和用户？ - How to set the Google Map zoom level to show all the markers and user at center? Google Maps API v3：如何设置缩放级别和地图中心到用户提交的位置？ - Google Maps API v3: How to Set Zoom Level And Map Center To User Submitted Location? 如何动态设置最大缩放级别以适合Google地图中的标记列表？ - How to set the maximum zoom level dynamically to fit a list of markers in google-map? 在Google地图中设置缩放 - set zoom in google map
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM