javascript - How to use leaflet markerclusterGroup?

Question

Welcome To Ask or Share your Answers For Others

javascript - How to use leaflet markerclusterGroup?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:38:04+0000

You do not need to include both leaflet.markercluster.js and leaflet.markercluster-src.js; you just need one of them.

In the head section of your HTML, include the following:

<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:

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.

Categories

javascript - How to use leaflet markerclusterGroup?

javascript - How to use leaflet markerclusterGroup?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags