要将"绘制标记"控件添加到Leaflet Map并捕获事件,可以按照以下步骤进行操作:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.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',
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
marker: true, // 启用绘制标记
// 其他绘制选项(如线、多边形等)可以根据需求进行配置
},
edit: {
featureGroup: drawnItems,
},
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
// 在这里可以对绘制的标记进行处理,例如添加到地图上或发送到服务器等
drawnItems.addLayer(layer);
});
通过以上步骤,你就可以将"绘制标记"控件添加到Leaflet地图上,并捕获绘制的标记事件。你可以根据具体需求对绘制的标记进行进一步的处理。
领取专属 10元无门槛券
手把手带您无忧上云