谷歌地图上的自定义缩放级别答案

【问题标题】：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>

【问题讨论】：

查看此链接，stackoverflow.com/questions/2265055/… 和 stackoverflow.com/questions/6048975/…

标签： google-maps

【解决方案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 的大小。

【讨论】：

您目前正在为您的地图使用百分比大小，这不适用于此选项。具体设置取决于显示器的大小。