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添加标记。

示例已经存在：

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

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

如果您想在点击位置添加标记，可以使用以下内容：

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;
}

Answer 2

您可以将click事件处理程序添加到地图表面。在处理程序中，添加带有“ pin”的图层。在下面的示例中，我添加了一个圆形图层，但是您可以轻松地为自定义“ pin”添加符号图层。

        self.map.on("click", function(e){
            console.log("background click", e.lngLat);
            var geojson = {
                type: "FeatureCollection",
                features: [{
                    type:"Feature",
                    geometry: { type: "Point", coordinates: [ e.lngLat.lng, e.lngLat.lat ]}
                }]
            };
            self.map.addSource("pins", {
                "type": "geojson",
                "data": geojson
            });
            self.map.addLayer({
                id: "pinsLayer",
                type: "circle",
                source: "pins", 
                paint: {
                    "circle-color": "red",
                    "circle-radius": 5 
                }
            });
        });

Mapbox允许用户点击地图和别针？

2 个答案: