1，首先去下载leaflet 的js 和css 文件
2，首先去mapbox官网创建accessToken，我们才能正常使用底图，和参考mapboxAPI使用
底图加载
var mymap = L.map('map').setView([51.505, -0.09], 13);L.tileLayer('{https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',maxZoom: 18,id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1,accessToken: 'pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA'
}).addTo(mymap);底图标记
var marker = L.marker([51.5, -0.09]).addTo(mymap)画圆
var circle = L.circle([51.508, -0.11], {color: 'pink',fillColor: '#f03',fillOpacity: 0.5,radius: 500
}).addTo(mymap);多边形
var polygon = L.polygon([[51.509, -0.08],[51.503, -0.06],[51.51, -0.047]
]).addTo(mymap);给标记 圆 多边形加弹窗
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");效果图：
自动加载的弹窗
var popup = L.popup().setLatLng([51.5, -0.09]).setContent("I am a standalone popup.").openOn(mymap);给弹窗加入点击事件
function onMapClick(e) {alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);优化点击事件弹窗
var popup = L.popup();
function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
}
mymap.on('click', onMapClick);完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script><style>#map { height: 300px; }</style><div id="map"></div>
</head>
<body><script>var mymap = L.map('map').setView([51.505, -0.09], 13);// 底图加载 L.tileLayer('{https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',maxZoom: 18,id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1,accessToken: 'pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA'
}).addTo(mymap);
// // 标记var marker = L.marker([51.5, -0.09]).addTo(mymap)
// // 画圆var circle = L.circle([51.508, -0.11], {color: 'pink',fillColor: '#f03',fillOpacity: 0.5,radius: 500
}).addTo(mymap);
// // 多边形
var polygon = L.polygon([[51.509, -0.08],[51.503, -0.06],[51.51, -0.047]
]).addTo(mymap);
// // 给标记 圆 多边形加弹窗
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");// // 自动加载的弹窗
var popup = L.popup().setLatLng([51.5, -0.09]).setContent("I am a standalone popup.").openOn(mymap);// // 给弹窗加入点击事件
function onMapClick(e) {alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);// // 优化点击事件弹窗
var popup = L.popup();
function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
}
mymap.on('click', onMapClick);// 关闭所有弹窗
mymap.closePopup()</script></body>
</html>