4. Popup 彈出視窗
阿新 • • 發佈：2022-04-15
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet"type="text/css" href="leaflet/leaflet.css" /> 8 <title></title> 9 <style type="text/css"> 10 body { 11 margin: 0; 12 } 13 14 #mapid { 15 height: 500px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="mapid"></div> 21 22 <script type="text/javascript" src="leaflet/leaflet.js"></script> 23 24 <script type="text/javascript"> 25 const mymapOptions = { 26 // 地圖中心 27 center: [50.5, 30.5], 28 // 地圖的最小縮放級別 29 minZoom: 11, 30 // 初始化時的縮放等級 31 zoom: 13, 32 // 地圖的最大縮放級別 33 maxZoom: 15, 34 // 強制讓地圖的縮放級別始終為這個值的倍數 35 zoomSnap: 1, 36 // 版權控制元件新增到地圖中（即水印） 37 attributionControl: false, 38 // 是否顯示zoom 縮放控制元件,預設是true 39 zoomControl: true, 40 } 41 42 const mymap = L.map('mapid', mymapOptions); 43 44 const myIcon = L.icon({ 45 iconUrl: './leaflet/images/marker-icon.png.png', 46 iconSize: [38, 95], 47 // 圖示 "tip" 的座標（相對於其左上角）。 48 //圖示將被對齊，使該點位於標記的地理位置。如果指定了尺寸，預設為居中，也可以在CSS中設定負的邊距。 49 iconAnchor: [22, 94], 50 // 彈出視窗（popup）的座標，相對於圖示錨點而言，將從該點開啟 51 popupAnchor: [-3, -76], 52 53 }); 54 55 const markerOptions = { 56 icon: myIcon, 57 // 不生效，預設是沒有tooltip 提示 58 title: 'ddddd' 59 } 60 61 // 經緯度的建立 62 const markerLatlng = L.latLng(50.5, 30.5); 63 64 const mapMarker = L.marker(markerLatlng).addTo(mymap); 65 // const mapMarker = L.marker([50.5, 30.5]).addTo(mymap); 可以是陣列的形式 66 67 // Tooltip 提示標記 68 // mapMarker.bindTooltip().openTooltip(); 69 70 // 彈窗標記 71 mapMarker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); 72 </script> 73 74 </body> 75 </html>