Mapbox.js是一个基于Leaflet的JavaScript库,用于创建交互式地图。Leaflet是一个开源的JavaScript库,用于在Web上创建交互式地图。leaflet.markercluster是一个用于在Leaflet地图上聚合标记的插件。
安装带有npm的leaflet.markercluster可以按照以下步骤进行:
npm init -y
npm install leaflet leaflet.markercluster
这将会安装Leaflet和leaflet.markercluster库,并将它们添加到你的项目的package.json文件中。
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
var map = L.map('map').setView(51.505, -0.09, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var markers = L.markerClusterGroup();
for (var i = 0; i < 100; i++) {
var marker = L.marker(getRandomLatLng());
markers.addLayer(marker);
}
map.addLayer(markers);
这个示例创建了一个Leaflet地图,并使用leaflet.markercluster插件将100个随机位置的标记聚合在一起。
总结:
领取专属 10元无门槛券
手把手带您无忧上云