mapbox 向地图添加Marker

最新推荐文章于 2025-05-23 11:11:53 发布

侧耳倾听...

最新推荐文章于 2025-05-23 11:11:53 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： mapbox marker

本文链接：https://blog.youkuaiyun.com/xm_w_xm/article/details/88885137

mapbox 同时被 2 个专栏收录

27 篇文章

订阅专栏

marker

1 篇文章

订阅专栏

本文介绍如何使用Mapbox创建一个交互式地图，通过JavaScript设置并拖动Marker，实时显示经纬度坐标。涵盖Mapbox地图初始化、Marker添加及事件监听等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法有很多种

一、

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])//添加marker的初始化点
      .addTo(map);//在哪个地图中添加
    // marker.remove(); 移除marker
    //事件
    function onDragEnd() {
      var lngLat = marker.getLngLat();
      coordinates.style.display = "block";
      coordinates.innerHTML =
        "Longitude: " + lngLat.lng + "<br />Latitude: " + lngLat.lat;
    }

    marker.on("dragstart", onDragEnd);//鼠标移动结束
    marker.on("drag", onDragEnd);//鼠标移动中
    marker.on("dragend", onDragEnd);//鼠标移动开始