iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

JavaScript 菜鳥研究室系列 第 4

菜鳥日記Day 4-載入Leaflet地圖套件

  • 分享至 

  • xImage
  •  

在載入林務局的JSON資料庫以後,使用者即可透過select選擇器,查詢森林步道的文字資訊。
此外我們還可以載入Leaflet的地圖套件,讓網站畫面看起來更加豐富,如下圖https://ithelp.ithome.com.tw/upload/images/20200917/20130039oWlKKTEdrn.png

載入Leaflet地圖套件的步驟如下
**1. 在HTML的head載入Leaft專用的CSS與JS檔案
https://ithelp.ithome.com.tw/upload/images/20200917/20130039h39xZl8fIC.png

2. 在all.js檔案載入變數map,並設定預設經緯度座標與地圖大小的縮放值
https://ithelp.ithome.com.tw/upload/images/20200917/201300393lD3rfUJoj.png

3.在all.js檔案載入圖層資料,設定資料來源、樣式、縮放最大值,並載入專屬的accessToken
https://ithelp.ithome.com.tw/upload/images/20200917/201300396gyN5fO4Cn.png

完成以上三個步驟,就能成功載入Leaflet的地圖啦~


上一篇
菜鳥日記Day 3-什麼是JSON?
下一篇
菜鳥日記Day 5-在地圖上增加標記(marker)
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言