The MOA test terminal developed recently needs to obtain the positioning of the current test user. The company does not have its own positioning component, so it needs to access amap API

Nonsense not to say, directly on the operation steps.

1. First visit the official website of AmAP API,

Follow the steps above to register step by step, note that also choose the Web side

2. Click position in the sidebar on the left of the page

// eslint-disable-line // eslint-disable-line // eslint-disable-line // eslint-disable-line // eslint-disable-line

export function MapLoader() {
    let aMapScript = document.createElement('script')
    aMapScript.setAttribute('src'.'https://webapi.amap.com/maps?v=1.4.11&key= own key&plugin = AMap. CitySearch')
    document.head.appendChild(aMapScript)
    return aMapScript.onload = function() {
        AMap.plugin('AMap.Geolocation'.function() { // eslint-disable-line
            var geolocation = new AMap.Geolocation({ // eslint-disable-line
                // Whether to use high precision positioning. Default: true
                enableHighAccuracy: true.// Set location timeout. Default: infinite
                timeout: 10000.// The offset of the location button's docking position, default: Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10.20), // eslint-disable-line
                // After successful positioning, adjust the map view range to make the positioning position and accuracy range visible in the view. Default: false
                zoomToAccuracy: true.// Locate the position of the button, RB represents the lower right
                buttonPosition: 'RB'
            })
 
            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete) // eslint-disable-line
            AMap.event.addListener(geolocation, 'error', onError) // eslint-disable-line
 
            function onComplete(data) {
                // Data is specific location information
                console.log(data)
                console.log('123123')}function onError(data) {
                console.log(data)
                    // Location error
                console.log('123123s')}})}}Copy the code

Whether it is worth noting that the company Intranet will block the request to send, here on a lot of the pit, and PC is can’t get this position, need to use mobile phones to test really, get the positioning of the coordinates, in fact, it may be so, unlike other online method can directly to the address, which lat and LNG localization after the migration, Then we used Autonavi’s Web services API to get the real warp location

{...position: {Q:30.xxxxxx,
  R:120.xxxxxx,
  lat:30.xxxxxx,
  lng:120.xxxxxx
  }
}
Copy the code

The next step is to apply for a Key for the Web service, which is different from the Key on the Web side

Once we’ve applied, we click on this coordinate transformation


https:/ / restapi.amap.com/v3/assistant/coordinate/convert?locations= just get LNG, just get lat&coordsys = gps&output = xml&key = < user key >
// Then we can get the real unoffset coordinates

Copy the code

So now we have real longitude and latitude coordinates, and then we need to call the inverse geography interface


https:/ / restapi.amap.com/v3/geocode/regeo?output=xml&location= real LNG, real lat&key = < user key > & radius = 1000 & extensions = all

Copy the code

To this, we will get the user’s real positioning! It’s really easy