时间戳

首页 > 解决方案 > MapBox 反向地理编码

javascript - MapBox 反向地理编码

问题描述

我对地图框和网络开发非常陌生。我有一个 Lat 和 long ，我想将其转换为地址名称并将其存储在 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)

标签： javascriptmapboxmapbox-gl-js

解决方案

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

请在下面查看我的实现：

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

推荐阅读