iT邦幫忙

0

Google MAP API 學習筆記(一) - 先載入就對了

因為自己的練習作品中需要用到Google map,所以就自己來學習怎麼用。

初期整體流程:

  1. 申請Google cloud platform 的API (免費帳號一個月有200美金的使用額度,基本上一個人需求使用,是不用擔心會超出額度的)
  2. 啟用 Maps JavaScript API
  3. 就是到說明文件裡面看怎麼使用了,而基本上我就是在裡面學習的。但是全都是英文,所以要麻就是英文看得懂,不然就是翻譯吧~

簡單載入地圖的流程:

  1. 在HTML的內先預先載入google 提供的JS 才可以使用google map api
<head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script async src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}"></script>
</head>
2. 在HTML 的<body>內 用上一個 <div class = "map"></div>的元件,要設定個大小給這個map,不然他不知道跑出來的地圖要多大
<body>
    <div style="height:50vh" id="map"></div>
</body>
  1. 然後你就可以在你的JS file內使用google map api 給的方法了
 let map;
 function initMap() {
     map = new google.maps.Map(document.getElementById("map"), { 

         center: {
             lat: -34.397,
             lng: 150.644
         },
         zoom: 8
     });
 }
initMap() 

Google map api 基本說明:

基本上都是先創建一個MAP為先
new google.maps.Map("HTML的DIV元件", 一些參數)
map 的基本參數有很多但是基本上就幾個

{ 
  center: {lat: -34.397,lng: 150.644},
  zoom: 8
});
  • center就是剛開始地圖的中心點
  • zoom 就是地圖剛開始的縮放大小
  • 最後 initMap() 就剛開始時,先初始化執行載入。

這些就是基本的載入囉 !


尚未有邦友留言

立即登入留言