谷歌地图上的自定义缩放级别
Posted
技术标签:
【中文标题】谷歌地图上的自定义缩放级别【英文标题】：Custom zoom level on Google Maps 【发布时间】：2017-02-23 22:57:39 【问题描述】：此时我有一张缩放级别为 4 的简单地图。缩放级别 5 对我来说太大了。理想情况下，我想要 4.6 缩放级别，这在 ios SDK for Google maps 中是可能的。
有没有办法将缩放级别设置为 4.6？我希望地图占据整页，所以不能真正放入一个 div 并使用它的那一部分。
目标是在中心显示完整的美国。
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>Map example</title>
<style>
html, body
height: 100%;
margin: 0;
padding: 0;
#map
height: 100%;
</style>
</head>
<body>
<div id="map"></div>
<script>
var layer;
var layer1;
function initMap()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 5,
center: lat: 39.8282, lng: -98.5795
);
</script>
<script async defer src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
【问题讨论】：
查看此链接，***.com/questions/2265055/… 和 ***.com/questions/6048975/… 【参考方案1】：您可以使用 CSS 缩放来使您的地图符合您的需要。 例如，将 Google 地图缩放设置为 4，然后将#map 缩放设置为 1.15（因为您希望 Google 地图缩放为 4.6 = 1.15 * 4）
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>Map example</title>
<style>
html, body
height: 100%;
margin: 0;
padding: 0;
#map
height: 100%;
zoom: 1.15;
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 4,
center: lat: 39.8282, lng: -98.5795
);
</script>
<script async defer src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
【讨论】：
【参考方案2】：Google 地图上的缩放级别是整数。句号。您唯一的选择是更改包含 google.maps.Map 对象的 div 的大小。
【讨论】：
您目前正在为您的地图使用百分比大小，这不适用于此选项。具体设置取决于显示器的大小。以上是关于谷歌地图上的自定义缩放级别的主要内容，如果未能解决你的问题，请参考以下文章