Leaflet TileLayer BaiduGaode 使用教程

2026-01-18 10:41:02作者：宣聪麟

项目介绍

Leaflet TileLayer BaiduGaode 是一个开源项目，旨在为 Leaflet 地图库提供对百度地图和高德地图瓦片图层的支持。通过这个插件，开发者可以在 Leaflet 地图上叠加百度地图或高德地图的图层，从而丰富地图的显示内容和功能。

项目快速启动

安装

首先，你需要在你的项目中引入 Leaflet 和 Leaflet TileLayer BaiduGaode 插件。你可以通过 npm 安装：

npm install leaflet leaflet-tilelayer-baidugaode

或者直接在 HTML 文件中引入：

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-tilelayer-baidugaode/dist/leaflet-tilelayer-baidugaode.js"></script>

使用示例

以下是一个简单的示例，展示如何在 Leaflet 地图上添加百度地图和高德地图的图层：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet TileLayer BaiduGaode 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-tilelayer-baidugaode/dist/leaflet-tilelayer-baidugaode.js"></script>
    <script>
        var map = L.map('map').setView([39.9042, 116.4074], 13);

        L.tileLayer.baiduGaode({
            layer: 'baidu',
            type: 'normal'
        }).addTo(map);

        L.tileLayer.baiduGaode({
            layer: 'gaode',
            type: 'normal'
        }).addTo(map);
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

城市规划系统：在城市规划系统中，可以使用 Leaflet TileLayer BaiduGaode 插件叠加百度地图或高德地图的图层，以便更直观地展示城市规划数据。
物流管理系统：物流管理系统中，可以通过该插件在 Leaflet 地图上显示物流车辆的实时位置，并结合百度地图或高德地图的路况信息进行路径规划。