如何在谷歌地图中设置缩放级别
Posted
技术标签:
【中文标题】如何在谷歌地图中设置缩放级别【英文标题】：How to set zoom level in google map 【发布时间】：2012-07-12 08:16:16 【问题描述】：这是我编写的代码，用于通过提供纬度和经度向谷歌地图添加标记。问题是我得到了一个高度放大的谷歌地图。我尝试将缩放级别设置为 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>
如何降低这种情况下的缩放级别？
【问题讨论】：
【参考方案1】：您下面的代码正在缩放地图以适应指定的范围：
addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);
如果您只有 1 个标记并将其添加到边界，则会导致最接近的缩放：
function addMarker(lat, lng, info)
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
如果您跟踪已“添加”到地图（或扩展边界）的标记数量，则只有在该数字大于 1 时才能调用 fitBounds。我通常将标记推入一个数组（供以后使用）并测试该数组的长度。
如果您只有一个标记，请不要使用 fitBounds。致电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】：map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map
【讨论】：
【参考方案3】：您正在寻找的是每个缩放级别的比例。数字以米为单位。使用这些：
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11：577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1：591657550.500000
【讨论】：
什么是缩放级别？例如，对于 20，它会在 1 m 的显示器上显示 1128.497220 m 的街道吗？ @CoolMind 我也试图理解这一点，它看起来取决于您屏幕的 PPI。 Open street map 提供比例尺，与 Google 比例尺不同，但它提供了有关缩放过程的更多信息。例如 0.298m * 1080 像素（宽）在屏幕上提供大约 322 m（纵向模式）我没有测试过这个，但看起来这是一个很好的起点，可以根据设备屏幕进行缩放调整。 wiki.openstreetmap.org/wiki/Zoom_levels 谢谢！您的回答帮助我理解将缩放级别降低 1 会使屏幕上的距离乘以 2。我在后来的开发中使用了这个事实。更改圆半径（例如，5、10、20、100 公里）时，我需要更改缩放级别。为了在屏幕（android 设备）上为所选距离获得适当的缩放级别，我必须编写此解决方案：***.com/a/56464293/2914140 in Kotlin。【参考方案4】：为了将地图放大两个级别，请添加这一小行代码，
map.setZoom(map.getZoom() + 2);
【讨论】：
【参考方案5】：这是我使用的一个函数：
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】：这些方法对我有用，它可能对任何人都有用： MapOptions interface
设置最小缩放： mMap.setMinZoomPreference(N);
设置最大缩放： mMap.setMaxZoomPreference(N);
其中 N 可以等于：
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11：577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1：591657550.500000
【讨论】：
以上是关于如何在谷歌地图中设置缩放级别的主要内容，如果未能解决你的问题，请参考以下文章