Google地图上的自定义缩放级别 [英] Custom zoom level on Google Maps
问题描述
我现在有一张缩放级别为4的简单地图.缩放级别5对我来说太大了.理想情况下，我希望在iOS SDK for Google Maps中可以达到4.6缩放级别.
I have a simple map with zoom level 4 at this point. Zoom level 5 is too big for me. Ideally, I'd like 4.6 zoom level which is possible in iOS SDK for Google maps.
是否有办法将缩放级别设置为4.6?我希望地图占据整个页面，所以不能真正放入div并使用其中的一部分.
Is there a way on how I can set the zoom level to 4.6? I want the map to occupy full page, so cannot really put in a div and use that part of it.
目标是在中心显示整个美国.
The objective is to show full USA in the center.
<!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>
推荐答案
您可以使用CSS缩放来使地图适合您的需求. 例如，将Google地图缩放设置为4，然后将#map缩放设置为1.15(因为您希望Google地图缩放为4.6 = 1.15 * 4)
You can use CSS zoom to make your map fits your need. For example, set Google map zoom to 4, then set #map zoom to 1.15 (because you want Google map zoom to 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>
这篇关于Google地图上的自定义缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
