天天看點

mapbox 向地圖添加Marker

方法有很多種

一、

mapbox 向地圖添加Marker
mapbox 向地圖添加Marker
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);//滑鼠移動開始