Question

我在mapbox gl js上完成了一张地图。

我正在尝试通过对经纬度坐标进行反向地理编码来获得一个placename /地址。

我可以设法正常进行正向地理编码，但是可以查询以下内容（例如）：

geocoder.query('New York')

但是我不能完全弄清楚如何用坐标反过来做到这一点。我已经尝试了以下方法，但无济于事：

// geocoder.query(126.981,37.539)
// geocoder.query("126.981,37.539")
// geocoder.query(37.539,126.981)
// geocoder.query("37.539,126.981")

我在文档中也找不到任何指向我正确方向的东西。因此，非常感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Set a point after Geocoder result</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
		.built_address {
		    position: fixed;
		    top: 0;
		    left: 0;
		    background-color: white;
		    padding: 10px;
		    font-size: 12px;
		    font-family: Arial;
		}
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<style>
#geocoder-container > div {
    min-width:50%;
    margin-left:25%;
}
</style>
	<div id='map'></div>
	<div class="built_address">LOREM IPSUM</div>


	<script>


	var built_address = '';
	var user_coordinates;
	var geocode_results;


	mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
	var map = new mapboxgl.Map({
	    container: 'map',
	    style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
	    center: [127.017768, 37.59837],
	    zoom: 12
	});

	var geocoder = new MapboxGeocoder({
	    accessToken: mapboxgl.accessToken
	});

	map.addControl(geocoder);

	// After the map style has loaded on the page, add a source layer and default
	// styling for a single point.
	map.on('load', function() {
	    map.addSource('single-point', {
	        "type": "geojson",
	        "data": {
	            "type": "FeatureCollection",
	            "features": []
	        }
	    });


	    map.addLayer({
	        "id": "point",
	        "source": "single-point",
	        "type": "circle",
	        "paint": {
	            "circle-radius": 10,
	            "circle-color": "#007cbf"
	        }
	    });


	    getUserLocation();

	});




	function getUserLocation() {

		// request to allow user position 
	    if (navigator.geolocation) {

	        navigator.geolocation.getCurrentPosition(showPosition);
			function showPosition(position) {

				// get user current coordinates and center map on coordiates
				console.log('L2', position)
				//console.log(position.coords.latitude, position.coords.latitude)
	            user_coordinates = {
	              lat: position.coords.latitude,
	              lng: position.coords.longitude
	            };


				// draw user location on mao
				map.getSource('single-point').setData({type: "Point", coordinates: [user_coordinates.lng,user_coordinates.lat]});

				// geocoder.query(user_coordinates.lat, user_coordinates.lng)


			    // Listen for the `result` event from the MapboxGeocoder that is triggered when a user
			    // makes a selection and add a symbol that matches the result.
			    geocoder.on('result', function(ev) {
			        map.getSource('single-point').setData(ev.result.geometry);
			        console.log('ev',ev)
			        built_address = ev.result.place_name

			    });

			}
	    } else {
	    	// if device doesnt support location
	    	console.log('device doesnt support location')
	    }

	}; /* END getUserLocation(); */



	</script>

</body>
</html>

Answer 1

尝试geocoder.mapboxClient.geocodeReverse：

geocoder.mapboxClient
  .geocodeReverse({
    latitude: user_coordinates.lat, 
    longitude: user_coordinates.lng
  }, function(err, res) {
    console.log(err, res)
  });

Mapbox GL JS-带坐标的反向地理编码

1 个答案: