第四章：Leaflet 实战：使用高德地图添加标记与弹窗（附完整代码）

最新推荐文章于 2026-05-14 10:34:56 发布

原创最新推荐文章于 2026-05-14 10:34:56 发布 · 1.6k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

leaflet

该文章已生成可运行项目，

在 Web 地图开发中，标记（Marker）和弹窗（Popup）是展示地理位置信息的核心元素。本文将基于 Leaflet 库，结合高德地图图层，详细讲解如何在地图上添加标记点、自定义弹窗内容，以及实现圆形区域标记，适合 Leaflet 初学者快速掌握地图交互基础。

一、技术选型与环境准备

1. 为什么选择 Leaflet + 高德地图？

Leaflet：轻量级开源 JavaScript 地图库（仅 38KB），API 简洁易用，兼容性强，适合快速开发。
高德地图：国内地图数据丰富，POI 信息准确，街道细节清晰，更符合国内用户需求。

2. 开发环境

无需复杂配置，只需引入 Leaflet 核心库即可：

<!-- Leaflet样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
      crossorigin=""/>
<!-- Leaflet核心脚本 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
        crossorigin=""></script>

二、实现步骤详解

1. 创建地图容器

首先在 HTML 中定义地图显示区域，通过 CSS 设置宽高：

<div class="container">
    <h1>Leaflet+高德地图：标记与弹窗示例</h1>
    <!-- 地图容器 -->
    <div id="map"></div>
</div>

<style>
    #map {
        width: 100%;
        height: 600px; /* 确保地图有明确高度才能显示 */
    }
    .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
    }
</style>

2. 初始化高德地图图层

高德地图提供了多种瓦片图层，这里我们使用标准街道地图：

// 初始化地图，中心点设为北京（纬度39.9042，经度116.4074），缩放级别12
const map = L.map('map').setView([39.9042, 116.4074], 12);

// 添加高德标准地图图层
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'], // 高德地图子域名
    attribution: '© 高德地图' // 版权信息
}).addTo(map);

图层 URL 参数说明：

{s}：子域名（1-4），用于负载均衡
{z}：缩放级别（1-18）
{x}、{y}：瓦片坐标
style=8：高德标准地图样式

3. 添加基础标记与弹窗

使用L.marker()创建标记，通过bindPopup()绑定弹窗内容：

// 天安门广场标记
const tiananmenMarker = L.marker([39.908823, 116.397470])
    .addTo(map)
    .bindPopup("<b>天安门广场</b><br>北京市中心广场，面积44万平方米")
    .openPopup(); // 初始加载时自动显示弹窗

L.marker()参数为地理位置坐标（纬度在前，经度在后）
bindPopup()支持 HTML 内容，可添加文字、图片甚至表单
openPopup()用于默认显示弹窗（可选）

4. 多标记点批量添加

对多个地点，可批量创建标记并绑定信息：

// 故宫博物院标记
const forbiddenCityMarker = L.marker([39.916365, 116.390812])
    .addTo(map)
    .bindPopup(`<b>故宫博物院</b><br>
               中国明清两代皇家宫殿<br>
               始建于1406年，占地面积约72万平方米`);

5. 圆形区域标记

使用L.circle()可标记特定范围（如景区、商圈等）：

// 北京奥林匹克公园圆形区域
const olympicParkCircle = L.circle([39.9912, 116.3908], {
    color: 'red',          // 边框颜色
    fillColor: '#f03',     // 填充颜色
    fillOpacity: 0.3,      // 填充透明度（0-1）
    radius: 1000           // 半径（单位：米）
}).addTo(map)
  .bindPopup("<b>北京奥林匹克公园</b><br>2008年奥运会主场馆所在地，包含鸟巢、水立方等建筑");

圆形标记常用于展示 "以某点为中心的一定范围"，如商圈辐射范围、景区面积等。

三、完整代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet+高德地图：标记与弹窗</title>
    <!-- 引入Leaflet资源 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
            crossorigin=""></script>
    <style>
        #map {
            width: 100%;
            height: 600px;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Leaflet+高德地图：标记与弹窗示例</h1>
        <div id="map"></div>
        <p>示例展示了基础标记、弹窗和圆形区域的使用，点击标记可查看详情。</p>
    </div>

    <script>
        // 初始化地图
        const map = L.map('map').setView([39.9042, 116.4074], 12);

        // 添加高德标准地图图层
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            attribution: '© 高德地图'
        }).addTo(map);

        // 1. 天安门广场标记（默认显示弹窗）
        const tiananmenMarker = L.marker([39.908823, 116.397470])
            .addTo(map)
            .bindPopup("<b>天安门广场</b><br>北京市中心广场，面积44万平方米")
            .openPopup();

        // 2. 故宫博物院标记
        const forbiddenCityMarker = L.marker([39.916365, 116.390812])
            .addTo(map)
            .bindPopup(`<b>故宫博物院</b><br>
                       中国明清两代皇家宫殿<br>
                       始建于1406年，占地面积约72万平方米`);

        // 3. 北京奥林匹克公园圆形区域
        const olympicParkCircle = L.circle([39.9912, 116.3908], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.3,
            radius: 1000
        }).addTo(map)
          .bindPopup("<b>北京奥林匹克公园</b><br>2008年奥运会主场馆所在地，包含鸟巢、水立方等建筑");
    </script>
</body>
</html>

四、扩展技巧与注意事项

弹窗内容优化：
- 可在弹窗中添加图片：<img src="图片URL" width="200">
- 添加链接：<a href="https://xxx" target="_blank">查看详情</a>
- 自定义样式：通过<style>标签设置弹窗内元素样式

标记图标自定义：
如需替换默认标记图标，可使用L.icon()：

const customIcon = L.icon({
    iconUrl: 'marker.png', // 自定义图标路径
    iconSize: [30, 30],   // 图标尺寸
    iconAnchor: [15, 30]  // 图标锚点（与坐标点对齐的位置）
});
L.marker([纬度, 经度], {icon: customIcon}).addTo(map);