Google Maps JavaScript API 工具｜专案实作

串接地图 JavaScript API 中虽然相较起来难度较高，不过官方文件写的也很简单易懂。

使用方式

1.宣告 HTML5 文件，将 JS CDN 引入档案(要先申请金钥)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>google maps api</title>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=你的金钥&callback=initMap">
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>

2.设定 map 容器的高度为100%，否则会看不到内容

<style>
    #map {
        height: 100%;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

最後，设定地图呈现的参数

<script>
  let map;

  function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        // 中心点位置
        center: { lat: 23.197250366210938, lng: 119.42967987060547 }, 
       
        zoom: 18, // 地图缩放比例 (0-20)
        maxZoom: 20, // 使用者能缩放地图的最大比例 
        minZoom: 3, // 使用者能缩放地图的最小比例
        
        streetViewControl: false, // 是否显示右下角街景小人
        mapTypeControl: false // 使用者能否切换地图样式：一般、卫星图等
      });
  }
</script>

参考来源：https://developers.google.com/maps/documentation/javascript/overview#maps_map_simple-html

<<: [Day??] 2021 iThome 铁人赛 - 颁奖典礼 @ 2022.01.08‧辅仁大学

>>: 免费Youtube影片下载工具全推荐！只要加上文字就能下载