Autonavi Open Platform register account and apply for Key

Amap JS API 2.0 document

Version 2.0 of the JSAPI provides two ways to introduce JSAPI:

  • JSAPI Loader (recommended)
  • Introduce JSAPI scripts directly< script SRC = "HTTP: / / https://webapi.amap.com/maps?v=2.0&key= you apply the key value of '> < / script >

In this case, JSAPI Loader is adopted (which can effectively avoid asynchronous loading and does not repeatedly request network resources when loading operations are performed for several times).

1. Ordinary HTML pages

Create a map object on the page

<! -- Map container --><div id="container"></div>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
  let AMap = null; 
  AMapLoader.load({
    "key": "Your key".// Web (JSAPI) key. This parameter is mandatory when load is invoked for the first time
    "version": "2.0".// JSAPI version, default 1.4.15
    "plugins": ["AMap.Geolocation"."AMap.PlaceSearch"].// List of plug-ins to use
  }).then((map) = > {
    AMap = map;
    initMap()
  }).catch((e) = > {
    // Amap failed to load
    console.error(e)
  })
  
  // Render map to page (render in server environment to succeed)
  function initMap() {
    let map = new AMap.Map('container', {
      center: [116.857461.38.310582].// Map center point coordinates
      zoom: 15.// Map zoom level
    });
  }
</script>
Copy the code

Access to locate

// Get the location
function getLocation() {
  let geolocation = new AMap.Geolocation({
    enableHighAccuracy: true.// Whether to obtain high-precision positioning, which may affect efficiency, default false
    timeout: 10000.// Locate the timeout, ms
    needAddress: true.// Whether inverse geocoding is required for the location result
    extensions: 'all'.// Do you need detailed geocoding information, default 'base'
  })
  // Get the exact location
  geolocation.getCurrentPosition(function(status, result) {
    console.log(status);
    console.log(result);
  })
  // Get city information
  geolocation.getCityInfo(function(status, result) {
    console.log(status);
    console.log(result); })}Copy the code

Site search

// Address search
function placeSearch(search) {
  if(! search)return;
  let placeSearch = new AMap.PlaceSearch({
    city: Cangzhou City.// Support city name, citycode, adcode
    citylimit: true.// Whether to force a search within the specified city. Default: false
    / / the type: "', / / interest category, use '|' space, the default: 'catering service | | business residence life'
    pageSize: 20.// Number of entries per page, default 10, range 1-50
    pageIndex: 1./ / page
    extensions: 'all'.// Default base, return the basic address information; All: Returns detailed information
    // map: map, // Map instance, optional
    // panel: 'panel', // Result list id container, optional
    autoFitView: true.// Whether to automatically adjust map view until marker points are visible
  })
  placeSearch.search(search, function(status, result) {
    console.log(result)
  })
}
Copy the code

Search around

// Perimeter search
function searchNear() {
  let placeSearch = new AMap.PlaceSearch({
    // city: ", // city of interest
    citylimit: true.// Whether to force a search within the specified city. Default: false
    / / the type: "', / / interest category, use '|' space, the default: 'catering service | | business residence life'
    pageSize: 20.// Number of entries per page, default 10, range 1-50
    pageIndex: 1./ / page
    extensions: 'all'.// Default base, return the basic address information; All: Returns detailed information
    // map: map, // Map instance, optional
    // panel: 'panel', // Result list id container, optional
    // autoFitView: true, // Whether to automatically adjust map view until marker points are visible
  })

  let keywords = ' './ / key
      position = [116.857461.38.310582].// Latitude and longitude of center point
      radius = 2000; // Search the radius from 0 to 50000
  placeSearch.searchNearBy(keywords, position, radius, function(status, result) {
    console.log(result)
  })
}
Copy the code

2. Vue

Install NPM i@amap /amap-jsapi-loader –save

use

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { AMapKey_H5 } from '@/config.js'
let AMap = null
export default {
  created() {
    this.initAMap()
  },
  methods: {
    initAMap() {
        const that = this
        AMapLoader.load({
            "key": AMapKey_H5,
            "version": '2.0'."plugins": ['AMap.PlaceSearch'.'AMap.Geolocation']
        }).then((map) = > {
            AMap = map
            // Other functions are the same as h5
        }).catch(e= > {
            console.log('Amap loading error', e)
        })
    }
    
  }
}
</script>
Copy the code

3. Wechat small program (the key of the small program is different from that of the Web terminal, so it needs to be created again)

The document

SDK Download address

const amapFile = require('.. /.. /common/amap-wx.130.js')
import { AMapKey_WX } from '.. /.. /config.js'
Page({
  data: {
    latitude: ' '.longitude: ' '
  },
  onLoad: function() {
    this.initAMap()
  },
  initAMap() {
    const that = this
    wx.getLocation({
      success: function(res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        }, function() {
          that.loadCity()
        })
      }
    })
  },
  // Get location information
  loadCity() {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    let { longitude, latitude } = this.data
    AMapWx.getRegeo({
        extensions: 'base'.location: `${longitude}.${latitude}`.success: function(res) {
            console.log(res)
            The return result contains province, city, district, address description (for example, near Cangzhou Industry and Information Bureau), and nearby POI
        },
        fail: function(res) {
            console.log(res)
        }
    })
  },
  // Location search
  placeSearch(search) {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    AMapWx.getInputtips({
      keywords: search, // Query the keyword
      city: Cangzhou City.// Interest city
      citylimit: true.// Whether to restrict search within the current city
      pageSize: 40.// The number of results displayed on a single page
      pageIndex: 1./ / page
      // location: ", // Latitude and longitude are comma-separated strings
      success: function(data) {
        if(data && data.tips) {
          that.setData({
            poisList: data.tips
          })
        }
      }
    })
  },
  // Retrieve the surrounding POIS
  getPOIAround(search) {
    const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})
    const that = this
    let { longitude, latitude } = this.data
    AMapWx.getPoiAround({
      querykeywords: search, // Retrieve keywords
      location: `${longitude}.${latitude}`.success: function(res) {
          console.log('Retrieval successful')
          console.log(res)
          that.poisList = res.poisData
      },
      fail: function(res) {
          console.log(res)
      }
    })
  }
})
Copy the code