9

我想创建一个传单标记集群组，我想添加所有标记，为此我编写了下面提到的代码。但我得到了错误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);
4

2 回答 2

25

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

在headHTML 部分中，包括以下内容：

<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以查看一个工作示例。

于 2018-03-17T15:33:31.887 回答
4

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

如您所见，我们需要包含来自 的两个 CSS 文件markercluster，即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>

于 2021-03-13T17:04:28.863 回答