如何使用传单markerclusterGroup？
[英]How to use leaflet markerclusterGroup?
问题描述
I want to create a leaflet marker cluster group and I want to add all the markers, and for that I have written the below-mentioned code.
我想创建一个传单标记集群组，我想添加所有标记，为此我编写了下面提到的代码。 But I am getting the error TypeError: L.markerClusterGroup is not a constructor但我收到错误TypeError: L.markerClusterGroup is not a constructor
I am not getting that there is an error in the scripting or in the code that I have written我没有发现脚本或我编写的代码中存在错误
<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);
2 个解决方案
解决方案1
19 已采纳 2018-03-17 15:33:31
You do not need to include both leaflet.markercluster.js and leaflet.markercluster-src.js ;您不需要同时包含leaflet.markercluster.js和leaflet.markercluster-src.js ； you just need one of them.你只需要其中之一。
In the head section of your HTML, include the following:在 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>
Then, in your JavaScript, create a marker cluster group:然后，在您的 JavaScript 中，创建一个标记集群组：
var markers = L.markerClusterGroup();
create some markers:创建一些标记：
var marker = L.marker(new L.LatLng(0, 0));
add the markers to the cluster group:将标记添加到集群组：
markers.addLayer(marker);
and finally add the cluster group to the map:最后将集群组添加到地图中：
map.addLayer(markers);
Take a look at this JSBin to see a working example.看看这个 JSBin看看一个工作示例。
解决方案2
3 2021-03-13 17:04:28
Here you have a simple working example with Open Street Maps, just try it by running this snippet.这里有一个使用 Open Street Maps 的简单工作示例，只需运行此代码段即可尝试。
As you may see we need to include two CSS files from markercluster , namely MarkerCluster.css and MarkerCluster.Default.css .如您所见，我们需要包含来自markercluster两个 CSS 文件，即MarkerCluster.css和MarkerCluster.Default.css 。 We must include the CSS and JS files from markercluster only after the inclusion of the leaflet files.只有在包含传单文件之后，我们才必须包含来自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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.