Preparation stage

  1. Register an account and apply for a Key

  2. Add the javascript API entry script tag to the page and replace “the key value you applied for” with the key you just applied for;

<script type="text/javascript" src="The key values of https://webapi.amap.com/maps?v=1.4.15&key= application"></script>
Copy the code
  1. Add a div tag as the map container and assign the ID attribute to the div.
<div id="container"></div>
Copy the code
  1. Execute the constructor, which takes the id of the map container added in preparation, and returns an instance object. At the same time, you can set the map center point, level, display mode, custom style and other attributes:
var map = new AMap.Map('container', {
  zoom:11./ / level
  center: [116.397428.39.90923].// Center point coordinates
  viewMode:'3D'// Use 3D view
});
Copy the code

Gets the map center point coordinates

Gets center point coordinates while dragging the map

// Initialize the map
var map = new AMap.Map('container', {
  resizeEnable: true.// Whether to monitor map container size changes
  zoom: 11.// Initial map level
  center: [121.498586.31.239637].// The initial map center point
});

// Display map hierarchy and center point information
function logMapinfo(){
  var center = map.getCenter(); // Get the current map center location
  var { lat, lng } = center;
  console.log(center);
};

// Bind the map movement event
map.on('moveend', logMapinfo);
Copy the code

Effect:throughmap.on('moveend', fn)Bind the map drag event again by fetchingmap.getCenter()It was easy to get the latitude and longitude data for the central point.

Inverse geocoding

Now that we’ve got the latitude and longitude information, it’s time to parse the address information into geocoding services.

  • Forward geocoding: The address description information is converted into geographical coordinates (latitude and longitude), corresponding to the getLocation method of amap. Geocoder
  • Reverse geocoding: Convert geographic coordinates (latitude and longitude) into address description information, corresponding to the getAddress method of amap. Geocoder
// Introduce the Geocoder plug-in
<script type="text/javascript" src="Https://webapi.amap.com/maps?v=1.4.15&key= you apply for the key value & plugin = AMap. The Geocoder." "></script>
...
var geocoder = new AMap.Geocoder({
  city: 'the country'}); . geocoder.getAddress(`${lng}.${lat}`.(status, result) = > {
  if (status === 'complete' && result.info === 'OK') {
    let address = result.regeocode.formattedAddress;
    let cityName = result.regeocode.addressComponent.province;
    console.log(address,cityName)
  }
})
Copy the code

Effect:

Official documentation: geocoding and reverse geocoding

Custom POI search and map linkage

Limited space, the process is roughly as follows:

Enter keywords > call search interface > interface to return batch address information for users to select > according to the latitude and longitude of the selected location > set map center point

Users drag the map and choose > Get the latitude and longitude of the map center > Reverse geocoding > address text information.

Problems found during use

Setting the center point of the map, zooming (mouse pulley) also triggers the map.on(‘ moveEnd ‘, fn) binding map drag event.

Set the center point of the map

. map.setCenter([109.598586.31.339637]); 
console.log('Move to 121.598586, 31.339637'); 
Copy the code

Effect:

This results in the need for additional processing of the moveEnd event, latitude and longitude of the center, and address resolution, when we set the center of the map using the POI search address.

Zoom mouse pulley

Effect:

summary

Here is just a simple familiarity with some simple API interfaces provided by Autonavi. For more complex scenarios, please go to the official website