Geolocation

This chapter mainly introduces the methods provided by the Gaode JS API to obtain geolocation information, including:

1. Map initialization loading geolocation to the current city
2. Browser Geolocation
3. IP location to obtain current city information

Map initialization loading geolocation to the current city

If you do not pass the center parameter when creating the AMap.Map object, you will find that the map will automatically locate and display your city. This is the initial loading geolocation of the JS API: you can obtain approximate geolocation information without passing in the corresponding parameters. The following code will display the map of your city after running:

var map = new AMap.Map('container', {
  zoom: 11,
  showOversea: true, //Enable world Map
})

Browser geolocation

The geolocation loaded during map initialization can only obtain city-level information. If you want to get specific location information, you need to use browser geolocation. AutoNavi JS API provides the AMap.Geolocation plugin to achieve geolocation, and the usage is as follows:

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // Whether to use high-precision geolocation, default: true
    timeout: 10000, // Set geolocation timeout, default: infinity
    offset: [10, 20],  // Offset of the geolocation button's docking position
    zoomToAccuracy: true,  //  After successful geolocation, adjust the map view range to make the position and precision range visible within the view, default: false
    position: 'RB' //  The placement of the location button, RB indicates the bottom right
  })

  geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
  });

  function onComplete (data) {
    // data is the specific location information
  }

  function onError (data) {
    // Location Error
  }
})

IP positioning to get current city information

If you do not need to get the exact location, but only city-level positioning information, it is recommended to use the AMap.CitySearch plugin. The AMap.CitySearch plugin is also faster to get the city compared to browser positioning.

The code to get the current city information using the CitySearch plugin is as follows:

AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // Query successful, result is the current city information
    }
  })
})

Some considerations

Mobile devices

Mobile devices include phones, pads, and other smart devices with GPS chips (e.g., watches, speakers, etc.). The mobile operating systems include iOS and Android. To successfully complete geolocation, the following prerequisites need to be met:

1. The system GPS is turned on
2. The app or browser used has obtained location permission
3. Allow location usage for the opened page

PC

Since most PC devices lack GPS chips, the failure rate of this service is around 5%.

geolocation failure

If geolocation fails or you encounter other issues, please refer to the FAQ:The geolocation process of Geolocation and the reasons for geolocation failures, send the failure information to us through a work order, and Amap engineers will assist you in resolving the issue.