Zoom

优质

小牛编辑

117浏览

2023-12-01

增加/减少缩放值

您可以通过修改地图选项中zoom属性的值来增加或减少地图的缩放值。

语法 (Syntax)

我们可以使用缩放选项增加或减少地图的缩放值。下面给出了更改当前地图缩放值的语法。

var mapOptions = {
   <b>zoom:required zoom value</b>
};

示例:缩放6

以下代码将显示Vishakhapatnam城市的路线图，其缩放值为6。

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      <script>
         function loadMap() {
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:6,
               <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
            };
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
   </head>
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
</html>

示例:缩放10

以下代码将显示Vishakhapatnam城市的路线图，其缩放值为10。

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      <script>
         function loadMap() {
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:10,
               <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
            };
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
   </head>
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
</html>