地圖加載時如何設置點擊標記 - Mapbox GLJS

Question

我制作了一個 MapBox 來獲取 Gmaps 的當前坐標：

mapboxgl.accessToken ='pk.eyJ1IjoibW5hdWZhbGF6a2lhIiwiYSI6ImNrcWV4MzN0ZDA2NjQyd2xrazhhbG96eHMifQ.3R_B2O8m_CQ_tERmmji8mA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [107.138013,-6.814071],
        zoom: 13,
    });
    
    // Add the control to the map.
    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        marker: false,
        mapboxgl: mapboxgl
    });

document.getElementById('geocoder').appendChild(geocoder.onAdd(map));


geocoder.on('result', function(r) {
    document.getElementById("maps").value = r.result.center;
    var reverse = document.getElementById("maps").value;
    reverse = reverse.split(",");
    var latitude = reverse[1];
    var longitude = reverse[0];
    document.getElementById("maps").value = latitude + "," + longitude;
  
    var marker1 = new mapboxgl.Marker({ draggable: false, color: "blue" })
    .setLngLat(r.result.center)
    .addTo(map);
    map.flyTo({
    center: r.result.center,
    zoom:15,
    speed:5,
    });
    map.on('click', function(e) {
            var coordinates = e.lngLat;
        var popup = new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML('MapBox Coordinate<br/>' + coordinates)
        .addTo(map);
        marker1.setLngLat(coordinates)
        marker1.setPopup(popup)
        map.flyTo({
        center: coordinates,
        zoom:15,
        speed:5,
        });
      document.getElementById("maps").value = coordinates;
      var lokasi = $('#maps').val().replace(/[^0-9,.-]/ig, "");
      $('#maps').val(lokasi);
      var reverse = document.getElementById("maps").value;
      reverse = reverse.split(",");
      var latitude = reverse[1];
      var longitude = reverse[0];
      document.getElementById("maps").value = latitude + "," + longitude;
          });
});

$('#modalrubahlokasi').on('shown.bs.modal', function() {
    map.resize();
});

document.querySelector('.mapboxgl-ctrl-geocoder input').placeholder = "Search Location Here";

這是 codepen 鏈接： https ://codepen.io/mnaufalazkia/pen/wvdwmoY

但是在我先搜索位置之前單擊地圖時，我無法設置標記。

但是我已經嘗試過map.on('load' 函數並添加map.on('click'用於設置標記的地圖加載函數，但無法正常工作。但是當我首先搜索位置並單擊地圖時，標記好好工作。

當我單擊地圖時，有人可以幫助我添加標記，就像我首先搜索位置時一樣，但當然刪除之前的標記。 謝謝

Answer 1

許多以下建議來自這些資源的重組：

• https://github.com/mapbox/mapbox-gl-js/issues/9209
• https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#remove
• https://docs.mapbox.com/mapbox-gl-js/example/popup/
• https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-example
• https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

您可以通過在地圖初始化后獨立於geocoder向地圖添加標記來實現在搜索位置之前單擊地圖時設置標記：

 map.on('click', function add_marker (event) { var coordinates = event.lngLat; console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat), 'id', event.id; marker.setLngLat(coordinates).addTo(map); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360; } var popup = new mapboxgl.Popup({ offset: 35 }) .setLngLat(coordinates) .setHTML('MapBox Coordinate<br/>' + coordinates) .addTo(map) })

然后你可以在你的geocoder器中處理你的彈出窗口，當你點擊離開時關閉。 這里不需要再次調用map.on('click') 。

 geocoder.on('result', function(r) { document.getElementById("maps").value = r.result.center; var reverse = document.getElementById("maps").value; var latitude = reverse[1]; var longitude = reverse[0]; document.getElementById("maps").value = latitude + "," + longitude; var marker1 = new mapboxgl.Marker({ draggable: false, color: "blue"}) .setLngLat(r.result.center) .addTo(map); map.flyTo({ center: r.result.center, zoom:15, speed:5, }) new mapboxgl.Popup({offset: 35, closeOnClick: true}) .setLngLat(r.result.center) .setHTML('MapBox Coordinate<br/>' + r.result.center) .addTo(map); map.on('click', function(){ marker1.remove(); }) });

這是 jsfiddle 中的一個工作示例： https ://jsfiddle.net/jameslcarpino/gchsvoxL/1/