在你開始你的地圖程式碼之前,你為頁面需要做好以下幾步準備:

-引入在文件頭部leaflet的css檔案:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

--緊接著引入leaflet的JS檔案:

<script src="https://unpkg.com/
 
[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

--在你希望引入地圖的位置處鍵入一個有id的div:（要有明確的高度）

<div id="mapid"></div>

建立地圖:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
 

或

var map = L.map('map', {
                center: [40, 100],
                zoom: 4
            });