Gop*_*iya 1 javascript leaflet angular
我要创建传单标记群集组，并要添加我写了下面提到的代码的所有标记。但是我得到了错误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);
您无需同时包含leaflet.markercluster.js和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可以看到一个工作示例。
这里有一个使用 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>| 归档时间： |
|
| 查看次数： |
6748 次 |
| 最近记录： |