leaflet入门一

首先为页面做准备

--引入在文档头部leaflet的css文件:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />

　　--紧接着引入leaflet的JS文件:

<!-- Make sure you put this AFTER Leaflet's CSS -->

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" ></script>

　　--在你希望引入地图的位置处键入一个有id的div:

<div id="mapid"></div>

　　--请确定你需要的div有明确的高度,例如将样式写在css里:

#mapid { height: 180px; }

 js

<!--创建地图--> var map = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //添加标记 L.marker([39.9788, 116.30226]).addTo(map) .bindPopup("北京大厦<br>").openPopup(); //圆 L.circle([39.9908, 116.26625], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup("颐和园欢迎你"); // 多边形很简单: L.polygon([ [39.92096, 116.38591], [39.91079, 116.38676], [39.91118, 116.3962], [39.92014, 116.39482] ]).addTo(map).bindPopup("故宫"); //openPopup是表示默认是否打开） /*marker.bindPopup("北京大厦").openPopup(); circle.bindPopup("颐和园"); polygon.bindPopup("故宫");*/ var popup = L.popup() .setLatLng([39.9908, 116.26625]) .setContent("I am a standalone popup.") .openOn(map); var popup = L.popup(); //点击map弹出提示框 function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(map); } map.on('click', onMapClick);