Leaflet在mapbox顯示彈窗
原創
花舞月咏潭
2019-08-09 15:39
<!DOCTYPE html>
<html>
<head>
<!-- 引入 文件 -->
<link rel="stylesheet" href="./leaflet.css" />
<script src="./leaflet.js">
</script>
<!-- 增加地圖高度 -->
<style>
#mapDiv { height: 800px; }
</style>
<!-- 創建一個 地圖的div id 必須有 但是自定義 -->
<div id="mapDiv"></div>
<script>
//到 mapbox 官網註冊並創建下面的access token都是免費的，不過有5w次的瀏覽限制
var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w';
//初始化 地圖
var leafletMap = L.map('mapDiv').setView([38.42, 112.733], 5);
//將圖層加載到地圖上，並設置最大的聚焦還有map樣式
L.tileLayer(url, {
maxZoom: 10,
id: 'mapbox.streets'
}).addTo(leafletMap);
//增加一個marker ，地圖上的標記，並綁定了一個popup，默認打開
L.marker([38.42, 112.733]).addTo(leafletMap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
//爲點擊地圖的事件 增加popup
var popup = L.popup();
function onMapClick(e)
{
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(leafletMap);
}
leafletMap.on('click', onMapClick);
</script>
</head>
<body>
</body>
</html>
