如何使用傳單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