如何在地图加载时设置点击标记-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('点击'获取设置标记的地图加载功能，但无法正常工作。但当我首先搜索位置并点击地图时，标记正常工作。

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

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-示例
• 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/