萬 事 屋 日 記

首页 说说 友链 关于我 与鸢栀聊天（体验版）
归档
订阅与政策
工具箱
切换到亮色模式

版权所有 © 2024 万事屋日记

备案号：皖ICP备2024035156号

欢迎来到万事屋~

在网页中集成地图功能

发表于：2024-12-08 03:56:57

本教程将详细介绍如何使用 Leaflet 库来在网页中创建一个交互式地图，展示一系列地理位置（例如旅行足迹）。此外，我们还将考虑移动端设备的使用体验，确保地图在不同设备上都能流畅运行。

目录

  1. 引入必要的库和准备工作

  2. 初始化地图

  3. 添加地图瓦片层

  4. 添加旅行足迹（地理标记）

  5. 响应式设计：适配移动端

  6. 优化地图交互体验

  7. 完成的代码示例

1. 引入必要的库和准备工作

要在网页中嵌入地图，首先需要加载 Leaflet 库的 CSS 和 JavaScript 文件。我们可以通过 CDN 快速集成 Leaflet。Leaflet 是一个开源的轻量级 JavaScript 地图库，支持地图的创建、交互和标记等功能。

引入 Leaflet 库

在 HTML 页面中引入 Leaflet 的 CSS 和 JavaScript：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行足迹地图展示</title>
    
    <!-- 引入 Leaflet CSS 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <!-- 引入 Leaflet JavaScript -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        /* 设置地图容器的高度和宽度 */
        #map {
            height: 500px;  /* 设置高度为500px */
            width: 100%;    /* 宽度占满父容器 */
        }
    </style>
</head>

说明

  • leaflet.css：这是 Leaflet 提供的 CSS 文件，控制地图的样式。

  • leaflet.js：这是 Leaflet 的核心 JavaScript 库，提供了地图绘制、交互等功能。

2. 初始化地图

在页面中添加一个容器来展示地图。通常情况下，使用一个 div 元素作为地图的容器。

<body>
    <!-- 地图容器 -->
    <div id="map"></div>
</body>

然后，通过 JavaScript 初始化地图并设置地图的中心和缩放级别。

// 创建一个地图对象，设置地图容器和初始位置
var map = L.map('map').setView([35.86166, 104.195397], 4); // 设置地图中心为中国，缩放级别为4

  • L.map('map')：创建一个 Leaflet 地图对象，第一个参数是地图容器的 ID。

  • .setView([35.86166, 104.195397], 4)：设置地图的中心点为中国（经纬度：35.86166, 104.195397）和初始的缩放级别为 4。

初始化地图代码完整示例：

var map = L.map('map').setView([35.86166, 104.195397], 4);

3. 添加地图瓦片层

地图显示的内容通常由瓦片图层（tile layer）构成。我们可以选择多个地图服务提供商，比如 OpenStreetMap、高德地图 等。在这个例子中，我们使用高德地图的瓦片图层。

添加高德地图瓦片层

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: '&copy; 高德地图',   // 高德地图的版权信息
    minZoom: 2,   // 最小缩放级别
    maxZoom: 18   // 最大缩放级别
}).addTo(map);

  • L.tileLayer(...)：指定瓦片图层的 URL 格式，并设置缩放级别范围。

  • subdomains：瓦片服务器的子域，允许更高效地加载瓦片。

  • minZoom 和 maxZoom：设置地图可缩放的范围。

完整的地图初始化代码：

var map = L.map('map').setView([35.86166, 104.195397], 4);

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: '&copy; 高德地图',
    minZoom: 2,
    maxZoom: 18
}).addTo(map);

4. 添加旅行足迹（地理标记）

我们将要在地图上展示旅行足迹，使用 Marker（标记） 或 CircleMarker（圆形标记） 来标记具体位置。

假设我们有一系列的旅行地点数据，例如不同的城市和访问时间，可以将这些位置以标记的形式展示在地图上：

// 旅行地点数据：经纬度、城市名称、访问时间
const footprints = [
    { lat: 31.230416, lng: 121.473701, title: '上海', desc: '2023年夏天到访' },
    { lat: 39.904200, lng: 116.407396, title: '北京', desc: '2023年冬天到访' },
    { lat: 22.543096, lng: 114.057865, title: '深圳', desc: '2024年春节到访' }
];

// 遍历数据，添加圆形标记到地图
footprints.forEach(point => {
    L.circleMarker([point.lat, point.lng], {
        radius: 8,            // 设置圆形标记的半径
        fillColor: "#FF4081", // 填充颜色
        color: "#fff",        // 边框颜色
        weight: 2,            // 边框宽度
        opacity: 1,           // 边框透明度
        fillOpacity: 0.8      // 填充透明度
    }).addTo(map) // 将标记添加到地图
    .bindPopup(`
        <div style="text-align: center;">
            <h3 style="color: #333;">${point.title}</h3>
            <p style="color: #666;">${point.desc}</p>
        </div>
    `); // 为标记绑定弹出框，显示地点信息
});

关键部分解释

  • L.circleMarker([lat, lng], {...})：创建一个圆形标记，传入经纬度和样式设置。

  • .bindPopup(...)：为标记绑定一个弹出框，当用户点击标记时，显示地点的标题和描述。

5. 响应式设计：适配移动端

移动设备的屏幕尺寸较小，因此我们需要确保地图在不同设备上都能良好展示。通过使用 viewport meta 标签 和 JavaScript 的屏幕宽度检测，可以根据设备类型调整地图的初始缩放级别。

设备检测和地图缩放级别调整

const isMobile = window.innerWidth <= 768; // 判断是否为移动设备

var map = L.map('map', {
    zoomControl: true,  // 启用缩放控件
    dragging: true,     // 启用地图拖动
    tap: true,          // 启用触摸事件
}).setView([35.86166, 104.195397], isMobile ? 3 : 4); // 根据设备设置缩放级别

// 启用触摸手势支持（适用于移动端）
if (isMobile) {
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.enable();
    map.boxZoom.enable();
    map.keyboard.enable();
}

说明

  • window.innerWidth <= 768：检查窗口宽度，判断是否为移动设备（宽度小于等于 768px）。

  • map.touchZoom.enable()：启用触摸屏设备上的缩放手势（双指缩放）。

6. 优化地图交互体验

为了提高用户在移动端的体验，我们可以进一步优化地图的交互方式。比如，添加提示用户如何操作地图的文本，帮助用户快速上

手。

移动端提示

if (isMobile) {
    var touchPrompt = L.control({ position: 'topleft' });
    touchPrompt.onAdd = function(map) {
        var div = L.DomUtil.create('div', 'touch-prompt');
        div.innerHTML = '双指缩放 单指平移';
        div.style.cssText = `
            background: rgba(255, 255, 255, 0.8);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            margin: 10px;
        `;
        setTimeout(() => {
            div.style.display = 'none'; // 提示消失
        }, 3000);
        return div;
    };
    touchPrompt.addTo(map); // 将提示添加到地图
}

7. 完成的代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行足迹地图展示</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const isMobile = window.innerWidth <= 768;

        var map = L.map('map', {
            zoomControl: true,
            dragging: true,
            tap: true,
        }).setView([35.86166, 104.195397], isMobile ? 3 : 4);

        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: '&copy; 高德地图',
            minZoom: 2,
            maxZoom: 18
        }).addTo(map);

        const footprints = [
            { lat: 31.230416, lng: 121.473701, title: '上海', desc: '2023年夏天到访' },
            { lat: 39.904200, lng: 116.407396, title: '北京', desc: '2023年冬天到访' },
            { lat: 22.543096, lng: 114.057865, title: '深圳', desc: '2024年春节到访' }
        ];

        footprints.forEach(point => {
            L.circleMarker([point.lat, point.lng], {
                radius: 8,
                fillColor: "#FF4081",
                color: "#fff",
                weight: 2,
                opacity: 1,
                fillOpacity: 0.8
            }).addTo(map)
            .bindPopup(`
                <div style="text-align: center;">
                    <h3 style="color: #333;">${point.title}</h3>
                    <p style="color: #666;">${point.desc}</p>
                </div>
            `);
        });

        if (isMobile) {
            var touchPrompt = L.control({ position: 'topleft' });
            touchPrompt.onAdd = function(map) {
                var div = L.DomUtil.create('div', 'touch-prompt');
                div.innerHTML = '双指缩放 单指平移';
                div.style.cssText = `
                    background: rgba(255, 255, 255, 0.8);
                    padding: 5px 10px;
                    border-radius: 4px;
                    font-size: 12px;
                    margin: 10px;
                `;
                setTimeout(() => {
                    div.style.display = 'none';
                }, 3000);
                return div;
            };
            touchPrompt.addTo(map);
        }
    </script>
</body>
</html>

通过上述代码，你就能够创建一个简单而功能丰富的地图应用，展示旅行足迹并适配不同设备。

发表评论

已输入 0/180 个字

最新评论

avatar

鸢栀 - 网站

回复 沉沦：

高德地图的图层好看，有机会我也换成高德。

这个地图不要 api key 直接就可以用，挺方便的

发表于：2024-12-08 13:06:05

来自：中国 - 安徽 - 合肥

avatar

沉沦 - 网站

高德地图的图层好看，有机会我也换成高德。

发表于：2024-12-08 09:24:32

来自：中国 - 河北 - 保定