Mapboxで地図とピンをクリックすることができますか？

Question

問題は、ユーザーが地図をクリックしてピンを追加できるようにするために、ビジネスがどこにあるのか、場所がわからないためにユーザーに表示するために行う必要があります。私は彼らにそれを挿入させる必要があります。しかし、ドキュメントは私にとって少し混乱しています。私はそれを見つけることができないか、私はそれを見逃しました。

これまでのところ私が持っている：

<div id="right" class="map"> 
     <div id='map' style='width: 100%; height: 100%;'></div> 
     <script> 
     mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg'; 
     var map = new mapboxgl.Map({ 
     container: 'map', 
     style: 'mapbox://styles/mapbox/streets-v10' 
     }); 
     </script> 
    </div> 

Answer 1

あなたはmapboxのGL JS APIを使用してマーカーを追加することができます。

例がすでにある：

map.on('click', (e) => { 
 
    var coords = `lat: ${e.lngLat.lat} <br> lng: ${e.lngLat.lng}`; 
 

 
    // create the popup 
 
    var popup = new mapboxgl.Popup().setText(coords); 
 

 
    // create DOM element for the marker 
 
    var el = document.createElement('div'); 
 
    el.id = 'marker'; 
 

 
    // create the marker 
 
    new mapboxgl.Marker(el) 
 
     .setLngLat(e.lngLat) 
 
     .setPopup(popup) 
 
     .addTo(map); 
 
    });

.mapboxgl-marker { 
 
    height: 20px; 
 
    width: 20px; 
 
    z-index: 5; 
 
    border: 1px solid black; 
 
    border-radius: 50%; 
 
    background-color: #305bad; 
 
}

：

https://www.mapbox.com/blog/custom-markers-mapboxgl/

https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

はあなたがこのようなものを使用することができますクリックした位置にマーカーを追加したい場合