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

看一下this 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 个答案: