前一篇博客记录了使用folium配合openstreetmap地图瓦片展现地图并标注地图组件，这里介绍一篇使用leaflet的使用教程，达到的效果和之前一片博客差不多，具体可以查看博客内容：https://sulao.cn/post/698

首先我们需要去https://leafletjs.com/download.html下载最新的leaflet文件，因为我是本地的离线地图，所以我们瓦片需要提前下载好，通过IIS提供瓦片图片的访问，因为后端用的flask对图片资源等代理不太好，所以用的IIS

直接上我的示例代码：

{% include 'public/header.html' %}
<link rel="stylesheet" href="{{ url_for('static',filename='leaflet/leaflet.css') }}"/>
<script src="{{ url_for('static', filename='leaflet/leaflet.js') }}"></script>
<div id="map" style="min-height: 570px;"></div>
<script>
var map = L.map('map').setView([30.779008, 114.292145], 11);
L.tileLayer('http://localhost/Tiles/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <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>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(map);
layui.use(['layer', 'jquery'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,$ = layui.jquery;
    layer.ready(function(){
        $.ajax({
            url:'{{ url_for("opod.mapRetrieve") }}',
              type: 'POST',
            dataType: 'json',
              success: function(json){
                console.log(json);
                if(json.code == 0){
                    if(json.no_lonlat > 0){
                        layer.msg("有"+no_lonlat+"个组件没有填写经纬度！");
                    }
                    for(var p in json.data){
                        console.log()
                        L.marker([json.data[p]["lon"], json.data[p]["lat"]]).addTo(map).bindPopup(json.data[p]["name"]).openPopup();
                    }
                }
            }
        });
    });
});
var popup = L.popup();
function onMapClick(e) {
    popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map);
}
map.on('click', onMapClick);
</script>
{% include 'public/footer.html' %}

实现效果和folium一样，但是folium再后端处理不太方便，所以还是用leaflet来处理地图，组件相对丰富很多

更多组件详细教程可以查看这里https://leafletjs.com/reference-1.5.0.html#map-option