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
How to set zoom level in google map
提问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
, setZoom
with the marker position and your desired zoom level.
如果您只有一个标记,请不要使用 fitBounds。打电话setCenter
,setZoom
用标记位置和您所需的缩放水平。
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
map.setCenter(pt);
map.setZoom(your desired zoom);
}
回答by Ties
map.setZoom(zoom:number)
map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map
https://developers.google.com/maps/documentation/javascript/reference#Map
回答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