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);//鼠標移動開始

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章