IT筆記 :Leaflet開源JavaScript地圖學習篇(1)
使用leaflet製作網頁版的地圖,首先引入基本的avaScript 庫(leaflet.js)和一個CSS 樣式表(leaflet.css)。 較為方便的做法就是引用CDN上的版本 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> 添加一個div容器來顯示地圖 <div id="map"></div> 設定地圖div的高度,可使用pixel或者%,如果沒有設定,地圖會顯現不出來! #map { /* configure the size of the map */ width: 100%; height: 100%; } 設定地圖的中心點座標及縮放等級。 var map = L.map('map').setView({lon: 114.20847, lat:22.29227},16); 或者 var map = L.map('map',{ center: [ 22.29227 , 114.20847], zoom: 16 }); 在容器中加底圖,添加 OpenStreetMap 地圖圖塊作為範例。 // add the OpenStreetMap tiles ...