您好
地图上点击添加img图片的功能可以通过原生leaflet库实现，具体步骤如下
- 使用Leaflet的
L.map方法创建地图对象，并设置初始视图。
- 使用
L.tileLayer方法加载天地图的矢量图层和矢量注记图层，并将它们分别添加到地图中作为底图和叠加图层。
- 创建一个图层
L.layerGroup，用于存储添加的标记。
- 监听地图的点击事件，在点击位置创建一个标记，并将其添加到标记图层中。
您可以参考一下下述代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([30.6, 114.4], 10);
// 使用天地图矢量图层作为底图
const TianDiMap_vec = L.tileLayer('http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=8a5c2b00e94b49659861e064c37f778d', {
maxZoom: 18,
attribution: '天地图矢量图层'
}).addTo(map);
// 使用天地图矢量注记图层作为叠加图层
const TianDiMap_cva = L.tileLayer('http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=8a5c2b00e94b49659861e064c37f778d', {
maxZoom: 18,
attribution: '天地图矢量注记图层'
}).addTo(map);
// 创建一个图层，用于存储标记
const markerLayer = L.layerGroup().addTo(map);
// 监听地图的点击事件，在点击位置添加一个标记，并将其添加到标记图层中
map.on('click', function(e) {
const marker = L.marker(e.latlng).addTo(markerLayer);
marker.bindPopup("<b>武汉市</b>").openPopup();
});
</script>
</body>
</html>
希望可以帮到您！
