当前位置：网站首页>Mapbox 创建多个可拖动的标记点

Mapbox 创建多个可拖动的标记点

2022-04-21 09:47:00 【Windyluna】

官方文档：创建可拖动的标记（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>

版权声明
本文为[Windyluna]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Windyluna/article/details/124243296

边栏推荐

猜你喜欢

随机推荐