Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标

骑猪看日落 2023-10-01 11:50 82阅读 0赞

## 场景 ##

Leaflet快速入门与加载OSM显示地图：

[Leaflet快速入门与加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

在上面加载显示地图的基础上，怎样实现添加标记、折线、圆形、多边形等。

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、添加标记

//添加一个标记
            L.marker([36.09, 120.35]).addTo(map).bindPopup("公众号:霸道的程序猿<br>").openPopup();

效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

2、添加折线

//添加一条折线
            var polyline = L.polyline([
                [36.1, 120.32],
                [36.05, 120.3]
            ],{color: '#FFFF00'}).addTo(map).bindPopup("这是折线");

效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

3、添加圆圈

//添加一个圆圈
            L.circle([36.01, 120.22], 5000, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
            }).addTo(map).bindPopup("青岛欢迎你");

效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

4、添加多边形

//添加一个多边形
            L.polygon([
            [39.92096, 116.38591],
            [39.91079, 116.38676],
            [39.91118, 116.3962],
            [39.92014, 116.39482]
            ]).addTo(map).bindPopup("故宫");

效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

5、点击地图弹窗显示坐标

//弹窗显示点击处的坐标
            var popup = L.popup();
            function onMapClick(e) {
                popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
            }
            map.on('click', onMapClick);

效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

6、完整代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>leaflet添加标记、圆圈、多边形</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script type="text/javascript">
            var map = L.map('map').setView([36.09, 120.35], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="OpenStreetMaphttps://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
           
            //添加一个标记
            L.marker([36.09, 120.35]).addTo(map).bindPopup("公众号:霸道的程序猿<br>").openPopup();
    
            //添加一个圆圈
            L.circle([36.01, 120.22], 5000, {
                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("故宫");
    
            //添加一条折线
            var polyline = L.polyline([
                [36.1, 120.32],
                [36.05, 120.3]
            ],{color: '#FFFF00'}).addTo(map).bindPopup("这是折线");
    
            //弹窗显示点击处的坐标
            var popup = L.popup();
            function onMapClick(e) {
                popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
            }
            map.on('click', onMapClick);
    
        </script>
    </body>
    
    </html>

[Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5ff3c697c19f47cdbd90178a2853f170.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7e4d74d4574f4b86943e2ef0dec8fb59.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/70ce35d886cb4fb99ca3310f8ff548f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/3efbeac965af4690834161ca8f17f7b0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/1bef86c38b0d464a9726388dacb91462.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16