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);