【亲测免费】 Leaflet.markercluster 安装和配置指南

2026-01-20 01:30:20作者：舒璇辛Bertina

1. 项目基础介绍和主要编程语言

项目基础介绍

Leaflet.markercluster 是一个用于 Leaflet JavaScript 库的插件，旨在提供美观且动画效果的标记聚类功能。它通过将地图上靠近的标记分组来提高用户体验，特别是在标记数量众多的情况下。

主要编程语言

该项目主要使用 JavaScript 编写，适用于前端开发。

2. 项目使用的关键技术和框架

关键技术和框架

Leaflet: 一个开源的 JavaScript 库，用于创建移动友好的交互式地图。
JavaScript: 项目的主要编程语言。
CSS: 用于样式化地图和标记。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保你已经具备以下条件：

一个现代的 Web 浏览器（如 Chrome、Firefox 等）。
一个文本编辑器（如 VSCode、Sublime Text 等）。
Node.js 和 npm（用于通过 npm 安装插件）。

详细安装步骤

步骤 1：创建项目目录

首先，创建一个新的项目目录，并在该目录下初始化一个新的 npm 项目。

mkdir leaflet-markercluster-demo
cd leaflet-markercluster-demo
npm init -y

步骤 2：安装 Leaflet 和 Leaflet.markercluster

使用 npm 安装 Leaflet 和 Leaflet.markercluster。

npm install leaflet leaflet.markercluster

步骤 3：创建 HTML 文件

在项目目录下创建一个新的 HTML 文件，例如 index.html，并在其中引入 Leaflet 和 Leaflet.markercluster 的 CSS 和 JS 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet MarkerCluster 示例</title>
    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <style>
        #map { height: 400px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="node_modules/leaflet/dist/leaflet.js"></script>
    <script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
    <script>
        var map = L.map('map').setView([38, -8], 7);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        var markers = L.markerClusterGroup();
        for (let i = 0; i < 1000; i++) {
            const marker = L.marker([getRandom(37, 39), getRandom(-9.5, -6.5)]);
            markers.addLayer(marker);
        }
        map.addLayer(markers);

        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }
    </script>
</body>
</html>