看這篇文章: https://www.cnblogs.com/developer-sue/p/9201640.html 很好quq
1、默認情況下，地圖上所有的鼠標和觸摸的交互控件都是激活的。
2、大部分的Leaflet方法在不返回明確的數值是都是返回一個對象
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
(是座標，還有最大縮放的倍數。好的， 那我們先改改這個試試？3、添加圖層
創建一個圖層通常需要涉及到爲圖層設置URL模板，圖層的屬性文本和縮放的最大級別。在當前例子下，運用Mapbox中的經典地圖的 mapbox.streets 圖塊（爲了從Mapbox中運用圖塊，必須請求token）
titleLayer是指基礎圖層的元素
L.tileLayer('網址(帶token)',{
maxZoom:15,
attribution:(文字描述) id:///,
}).addTo(myMap);
看起來是圖層添加流啊…… 這個最大放大倍數，然後你看啊，最開始那個setView那裏是，，，，現在的，縮放到的倍數是什麼（現在是第幾層）這個參數不是什麼有幾層的限制呀1是最大，後面依次變小了qwq。。
這個標記的話，直接。。你在setView那裏多少層， 你添加上了的就是多少層。。
嗯，這個層呢是基於它這樣來畫的，如果不添加地圖信息也可以直接畫多邊形~~~ 只需要給端點就可以自己連了，更普適一點，canvas可做但是有點笨重？這個更漂亮了呢qwq。。地圖說不定可以換個背景?..
var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap); //初始化一個多邊形,自定義樣式如circle
可以在之前創建的變量名字上。。。續加這個bindPop，可以點擊觸發喲quq
marker.bindPopup(
還有可以是var popup
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
latlang應該是座標最後附上代碼，直接到html文件裏就可以運行
前面那兩句...~~ 沒有下載leaflet的話，也可以用連網資源
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>leaflet</title>
<link rel="stylesheet" href="./leaflet.css"/>
<script src="./leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var mymap = L.map('mapid').setView([51.505, -0.09], 12); //（地理座標，縮放等級）
//titleLayer是指基礎圖層的元素
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 15, //最大放大倍數
attribution: 'Map data © <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>',
id: 'mapbox.streets', //地圖類型，不強制選擇圖層的提供方，可替換mapbox.satellite等
}).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(mymap); //初始化添加一個標記 (
var circle = L.circle([51.5, -0.05], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
//初始化一個邊框red，內部背景顏色#f03，透明度0.5，半徑爲500的圓圈範圍
var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap); //初始化一個多邊形,自定義樣式如circle
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //openPopup()初始化界面時觸發
circle.bindPopup("I am a circle."); //點擊觸發
polygon.bindPopup("I am a polygon.");
//這裏我們使用openOn而不是addTo是因爲當開啓一個新的氣泡點時將自動關閉上一個打開的氣泡點,這樣提高了使用性
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
var popup = L.popup(); //聲明（初始化）一個彈窗
function onMapClick(e) {
console.log(e.latlng)
popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); //點擊時通過e.latlng顯示該點座標
}
mymap.on('click', onMapClick); //點擊時觸發onMapClick事件
</script>
</body>
</html>