如何使用传单markerclusterGroup？

Question

我想创建一个传单标记集群组，我想添加所有标记，为此我编写了下面提到的代码。 但我收到错误TypeError: L.markerClusterGroup is not a constructor

我没有发现脚本或我编写的代码中存在错误

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.3/dist/MarkerCluster.css">

<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js'></script>

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
map.addLayer(markers);

Answer 1

您不需要同时包含leaflet.markercluster.js和leaflet.markercluster-src.js ； 你只需要其中之一。

在 HTML 的head部分，包括以下内容：

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
</head>

然后，在您的 JavaScript 中，创建一个标记集群组：

var markers = L.markerClusterGroup();

创建一些标记：

var marker = L.marker(new L.LatLng(0, 0));

将标记添加到集群组：

markers.addLayer(marker);

最后将集群组添加到地图中：

map.addLayer(markers);

看看这个 JSBin看看一个工作示例。

Answer 2

这里有一个使用 Open Street Maps 的简单工作示例，只需运行此代码段即可尝试。

如您所见，我们需要包含来自markercluster两个 CSS 文件，即MarkerCluster.css和MarkerCluster.Default.css 。 只有在包含传单文件之后，我们才必须包含来自markercluster的 CSS 和 JS 文件。

 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; }

 #map {height: 400px}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.Default.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script> <div id="map"></div>

如何使用传单markerclusterGroup？

问题描述

2 个解决方案

解决方案1
19 已采纳 2018-03-17 15:33:31

解决方案2
3 2021-03-13 17:04:28

如何使用传单markerclusterGroup？

问题描述

2 个解决方案

解决方案1 19 已采纳 2018-03-17 15:33:31

解决方案2 3 2021-03-13 17:04:28

解决方案1
19 已采纳 2018-03-17 15:33:31

解决方案2
3 2021-03-13 17:04:28