如何在检测到当前位置后在地图框中获取经度和纬度？

Question

我使用此参考 https://docs.mapbox.com/mapbox-gl-js/example/locate-user/.

为我的网络应用程序实现了 Mapbox

我试过了

mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});

// Add geolocate control to the map.
        let geolocate = new mapboxgl.GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true
                },
                trackUserLocation: true
            })
        map.addControl(geolocate);

        geolocate.on('click', function(e) {
            // The event object (e) contains information like the
            // coordinates of the point on the map that was clicked.
            let latitude = e.lngLat.lat;
            let longitude = e.lngLat.lng;
            alert("Clicked");
            $("#latitude").text(latitude);
            $("#longitude").text(longitude);
            console.log('Latitude: ' + latitude + '\n Longitude: ' + longitude);
        });

但还是不行。

请问，点击定位按钮后如何获取当前经纬度？

谢谢

Answer 1

你要找的是this codepen I created for you:

let map = new mapboxgl.Map({
  container: "map", // container id
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-96, 37.8], // starting position
  zoom: 3 // starting zoom
});

// Add geolocate control to the map.
// Initialize the geolocate control.
let geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
map.on("load", function () {
  geolocate.trigger(); // add this if you want to fire it by code instead of the button
});
geolocate.on("geolocate", locateUser);

function locateUser(e) {
  console.log("A geolocate event has occurred.");
  console.log("lng:" + e.coords.longitude + ", lat:" + e.coords.latitude);
}

如何在检测到当前位置后在地图框中获取经度和纬度？

How to get longitude and latitude in mapbox after detect current location?

javascript

mapbox

mapbox-gl-js