<div id="map"></div>
#map{
  height:400px;
}
 // 建立 Leaflet 地圖
  var map = L.map('map');

  // 設定經緯度座標
  map.setView(new L.LatLng(25.040199, 121.511901), 12);
  
  // 設定圖資來源
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGVhdGhoZWxsIiwiYSI6ImNrNzF4N2JuYzBhNWIzZXBzOGlxeGRjc2wifQ.pwUlaeQPx1RBk21yyAbeOw', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiZGVhdGhoZWxsIiwiYSI6ImNrNzF4N2JuYzBhNWIzZXBzOGlxeGRjc2wifQ.pwUlaeQPx1RBk21yyAbeOw'
}).addTo(map);
                       
var marker = L.marker([25.040199, 121.511901]).addTo(map);
marker.bindPopup("總統府").openPopup();

External CSS

  1. https://unpkg.com/leaflet@1.6.0/dist/leaflet.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://unpkg.com/leaflet@1.6.0/dist/leaflet.js