MapBox反向地理编码

Question

我对地图盒和web开发非常陌生。我有一个很长很长的与我，我想把它转换成一个地址名称，并将其存储在一个JavaScript变量，以便我可以使用地址名称。我努力寻找我应该为反向编码添加什么头文件，以及我应该添加什么JavaScript来实现我的目标。非常感谢您的宝贵时间。

JS

mapboxgl.accessToken = 'pk.eyJ1IjoiZXNxdWlsYXgiLCJhIjoiY2tqd2ZyMJ9.7z7Eyrj3iexJ9uDVYIT0yw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [115.83333, -32.01667], // starting position [lng, lat]

zoom: 11// starting zoom


});
var marker = new mapboxgl.Marker({color:"#ff3300",dragable:true,scale:0.8}).setLngLat([115.83333, -32.01667]).addTo(map)

Answer 1

这可以通过添加geocoder插件并将其设置为反向地理编码来实现。由于您传递的坐标可能会翻转，或者超出范围，因此需要在将它们传递给地理编码器之前对它们进行完整性检查否则会崩溃。

请参见下面我的实现:

var coordinates = document.getElementById('coordinates'); // gets element from geocoder plugin
var coordinatesGeocoder = function(query) {
// input validation. Decimal coordinates will be matched by this regex
var matches = query.match(
/^[ ]*(?:Lat: )?(-?d+.?d*)[, ]+(?:Lng: )?(-?d+.?d*)[ ]*$/i
);
if (!matches) {
return null;
}

function coordinateFeature(lng, lat) {
return {
center: [lng, lat],
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
place_name: 'Lat: ' + lat + ' Lng: ' + lng,
place_type: ['coordinate'],
properties: {},
type: 'Feature'
};
}

var coord1 = Number(matches[1]);
var coord2 = Number(matches[2]);
var geocodes = [];

if (coord1 < -90 || coord1 > 90) {
// must be lng, lat
geocodes.push(coordinateFeature(coord1, coord2));
}

if (coord2 < -90 || coord2 > 90) {
// must be lat, lng
geocodes.push(coordinateFeature(coord2, coord1));
}

if (geocodes.length === 0) {
// else could be either lng, lat or lat, lng
geocodes.push(coordinateFeature(coord1, coord2));
geocodes.push(coordinateFeature(coord2, coord1));
}


return geocodes;
};


var Geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: coordinatesGeocoder,
zoom: 10,
placeholder: 'Adresse oder Koordinaten z.B. (10.50, 48.00)',
mapboxgl: mapboxgl
})

map.addControl(Geocoder);