官方文档:创建可拖动的标记(Marker)
前言:
(1)由于采用图层的方式添加标记点 addImage,存在多个点时,无法判断被拖动的是哪一个点,因此采用 marker 标记点来实现。
(2)marker 添加标记点:给每个标记点添加索引 data-index
、拖拽结束后根据对应索引值,找到拖拽前后标记点的坐标值变化。
实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建可拖动的标记(Marker)</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
.coordinates {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
bottom: 40px;
left: 10px;
padding: 5px 10px;
margin: 0;
font-size: 11px;
line-height: 18px;
border-radius: 3px;
display: none;
}
</style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoibWVpaW4xMjM0NTYiLCJhIjoiY2tqbWtlemR5MGt4MTJ4bjBxcjNmcng5NCJ9.GRpGEmZhxJ58EkNW6Ta_AQ";
var coordinates = document.getElementById("coordinates");
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [0, 0],
zoom: 2
});
// // 单个标记点(可拖动)
// var marker = new mapboxgl.Marker({
// draggable: true
// })
// .setLngLat([0, 0])
// .addTo(map);
// function onDragEnd(e) {
// var lngLat = marker.getLngLat();
// coordinates.style.display = "block";
// coordinates.innerHTML =
// "Longitude: " + lngLat.lng + "<br />Latitude: " + lngLat.lat;
// }
// marker.on("dragend", onDragEnd);
// 多个标记点(可拖动)
let markerList = []; //标记点集合
var isDrag = true; //可以拖动:draggable: true
// 经纬度点集合
var markerMore = [
{ longitude: -25.400390624998096, latitude: 4.91583280132032 },
{ longitude: -23.818359375007987, latitude: -3.1624555302312416 },
{ longitude: -11.337890625005741, latitude: -12.554563528580573 }
];
for (let i = 0; i < markerMore.length; i++) {
let dom = document.createElement("div");
dom.innerHTML = `<div class="sampling-box" data-index="${i}" style="width: 16px;height: 16px;background: #5393E7;border-radius: 50%;"></div>'`;
var lngLat = [markerMore[i].longitude, markerMore[i].latitude];
let marker = new mapboxgl.Marker(dom)
.setLngLat(lngLat)
.setDraggable(isDrag)
.addTo(this.map);
// console.log("marker", marker);
marker.on("dragend", this.onDragEnd);
markerList.push(marker);
}
function onDragEnd(e) {
let marker = e.target;
let lngLat = marker.getLngLat();
let element = marker.getElement();
// console.log("marker拖动结束坐标:", lngLat);
// console.log("marker拖动结束HTML:", element);
// 读取html元素 data携带的index属性
let dataset = element.querySelector(".sampling-box").dataset;
let currneMarkerIndex = dataset.index ? Number(dataset.index) : 0; // 对应的是markerMore数组的序号
}
</script>
</body>
</html>