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

Windyluna

已于 2022-04-19 09:46:13 修改

阅读量1.1k

点赞数

分类专栏：地图文章标签： mapbox地图

于 2022-04-18 13:59:35 首次发布

本文链接：https://blog.csdn.net/windyluna/article/details/124243296

版权

Mapbox GL JS Marker 拖动标记点坐标

关键词由CSDN通过智能技术生成

地图专栏收录该内容

12 篇文章 3 订阅

订阅专栏

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