Google地图上的自定义缩放级别

Question

Google地图上的自定义缩放级别

我现在有一张缩放级别为4的简单地图。缩放级别5对我来说太大了。理想情况下，我希望在iOS SDK for Google Maps中可以达到4.6缩放级别。

有没有办法将缩放级别设置为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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*ham 5

您可以使用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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	5612 次
最近记录：	9 年前