Leaflet地图基础示例_leaflet 示例-优快云博客

本文详细介绍了如何使用Leaflet库创建地图、添加各种元素如图标、标记、气泡、提示、线、圆、矩形和多边形，并实现地图交互如点击事件、飞到指定坐标等功能。此外，还涵盖了GeoJSON矢量图形的绘制以及地图视图的调整等高级操作。

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
    <title>Leaflet Map</title>
    <style>
        html,
        body {
     
     
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
     
     
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
    	//初始化地图
        var map = L.map(document.getElementById("map"), {
     
     
            center: L.latLng(39.91589994226363, 116.39079093933107),
            zoom: 16,
            minZoom: 10,
            maxZoom: 20
        });

        //添加底图瓦片
        var tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        L.tileLayer(tileUrl, {
     
     
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            minZoom: 10,
            maxZoom: 20
        }).addTo(map);

        //创建图标
        var icon = L.icon({
     
      
            iconUrl: 'https://img-home.csdnimg.cn/images/20210806113404.gif', 
            className: 'icon' 
        });

        //画点
        var marker = L.marker(
            [39.920598, 116.390576], 
            {
     
      
                draggable: true, 
                icon: icon,
                //rotationAngle: 80 //旋转角度，需要借助插件leaflet.rotatedMarker.js
            },
        ).addTo(map);
        marker.setLatLng([39.920598, 116.390576]); //更新位置
        //marker.setRotationAngle(120); //更新角度，需要借助插件leaflet.rotatedMarker.js
        
        //给点添加气泡
        marker.bindPopup('气泡内容', {
     
      //内容可以自定义为HTML，如：<div>自定义结构</div>
            offset: [0, -16