地图加载时如何设置点击标记 - 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";

这是代码笔链接： https://codepen.io/mnaufalazkia/pen/wvdwmoY

但是在搜索位置之前点击地图无法设置标记

但我试过map.on('load'函数和添加map.on('click' 用于设置标记的地图加载功能，但无法正常工作。但是当我先搜索位置并单击地图时，标记正常工作。

有人可以帮我在点击地图时添加标记，就像我先搜索位置时一样，但当然要删除之前的标记。谢谢

Answer 1

以下许多建议来自对这些资源的重组：

您可以在搜索位置之前单击地图时设置标记，方法是在地图初始化后独立于 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/

地图加载时如何设置点击标记 - Mapbox GLJS

How set marker on click when map load - Mapbox GLJS

javascript

jquery

mapbox

mapbox-gl-js

mapbox-marker