2 入门Leaflet—开源、移动端友好的交互式地图 JS库_leaflet中文文档

作者：从前慢现在也慢 | 2024-03-14 13:53:33

踩

leaflet中文文档

需要的基础知识：html、css、js

学习时基于原生html

参考leaflet中文文档 Quick Start Guide - Leaflet - 一个交互式地图 JavaScript 库

该文档讲的已经很清楚了

1.在head 引入leaflet的css ，引入leaflet的js

2.用个div装地图

3.设置地图大小样式

4.初始化地图并将其视图设置为我们选择的地理坐标和缩放级别，并添加一个瓦片（Tile）图层到地图中

5.添加一个标记，添加一个圆，添加一个多边形

6.添加处理事件，例如点击事件


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入leaflet的css -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <!-- 1.引入leaflet的js -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
 
<body>
    <!-- 2.用个div装地图 -->
    <div id="mapid"></div>
</body>
 
<script>
    // 4.初始化地图并将其视图设置为我们选择的地理坐标和缩放级别
    var map = L.map('mapid').setView([40.005331, 116.347532], 16);
    // 4.添加一个瓦片（Tile）图层到地图中
    L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
        maxZoom: 18
    }).addTo(map);
    // 5.添加一个标记：
    var marker = L.marker([39.9979, 116.3416]).addTo(map);
    //5.使用 Popups
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
    //5. 添加⚪
    var circle = L.circle([39.9979, 116.3416], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(map);
    // 5.添加多边形同样简单：
    var polygon = L.polygon([
        [39.9979, 116.3416],
        [39.9979, 118.3416],
        [39.9979, 118.3416]
    ]).addTo(map);
 
 
    // 6.处理事件
    // 每次在 Leaflet 中触发某些事件时，例如用户单击标记、地图缩放更改，相应的对象都会发送一个事件，
    // 可以使用函数订阅该事件。允许您对用户交互做出反应：
    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);
 
    //6.点击时，触发onMapClick事件
    map.on('click', onMapClick);
</script>
<style>
    /* 3.地图大小样式 */
    #mapid {
        height: 280px;
        width: 280px;
    }
</style>
 
</html>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/234958