JS API 2.0版本提供了两种方式引入JSAPI：JSAPI Loader(推荐)

直接引入JSAPI脚本

这里采取的是JSAPI Loader的方式(可有效避免异步加载问题，且多次执行加载操作时不会重复请求网络资源等)。

1. 普通html页面

在页面创建地图对象

AMapLoader.load({

"key": "你的key", // Web端 (JSAPI) key，首次调用load必填

"version": "2.0", // JSAPI版本，默认 1.4.15

"plugins": ["AMap.Geolocation", "AMap.PlaceSearch"], // 要使用的插件列表

}).then((map) => {

AMap = map;

initMap()

}).catch((e) => {

// 高德地图加载失败

console.error(e)

})

// 渲染地图到页面(要在服务器环境才能渲染成功)

function initMap() {

let map = new AMap.Map('container', {

center: [116.857461, 38.310582], // 地图中心点坐标

zoom: 15, // 地图缩放级别

});

}

复制代码

获取定位// 获取位置

function getLocation() {

let geolocation = new AMap.Geolocation({

enableHighAccuracy: true, // 是否获取高精度定位，可能影响效率，默认false

timeout: 10000, // 定位超时时间，ms

needAddress: true, // 是否需要将定位结果进行逆地理编码操作

extensions: 'all', // 是否需要详细的你地理编码信息，默认'base'

})

// 获取精确位置

geolocation.getCurrentPosition(function(status, result) {

console.log(status);

console.log(result);

})

// 获取城市信息

geolocation.getCityInfo(function(status, result) {

console.log(status);

console.log(result);

})

}

复制代码

地点搜索// 地址搜索

function placeSearch(search) {

if(!search) return;

let placeSearch = new AMap.PlaceSearch({

city: '沧州市', // 兴趣点城市，支持城市名、citycode、adcode

citylimit: true, // 是否强制在设置的城市内搜索，默认false

// type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'

pageSize: 20, // 每页条数，默认10，范围1-50

pageIndex: 1, // 页码

extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息

// map: map, // 地图实例，可选

// panel: 'panel', // 结果列表的id容器，可选

autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围

})

placeSearch.search(search, function(status, result) {

console.log(result)

})

}

复制代码

周边搜索// 周边搜索

function searchNear() {

let placeSearch = new AMap.PlaceSearch({

// city: '', // 兴趣点城市

citylimit: true, // 是否强制在设置的城市内搜索，默认false

// type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'

pageSize: 20, // 每页条数，默认10，范围1-50

pageIndex: 1, // 页码

extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息

// map: map, // 地图实例，可选

// panel: 'panel', // 结果列表的id容器，可选

// autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围

})

let keywords = '', // 关键字

position = [116.857461, 38.310582], // 中心点经纬度

radius = 2000; // 搜索半径 0-50000

placeSearch.searchNearBy(keywords, position, radius, function(status, result) {

console.log(result)

})

}

复制代码

2. Vue

安装 npm i @amap/amap-jsapi-loader --save

使用

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

// 其他功能同h5

}).catch(e => {

console.log('高德地图加载错误', e)

})

}

}

}

复制代码

3. 微信小程序(小程序的key和web端的不同，需重新创建)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()

})

}

})

},

// 获取位置信息

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)

// 返回结果包含省、市、区，地址描述(例：沧州市工业和信息化局附近)，和附近POI

},

fail: function(res) {

console.log(res)

}

})

},

// 地点搜索

placeSearch(search) {

const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})

const that = this

AMapWx.getInputtips({

keywords: search, // 查询关键词

city: '沧州市', // 兴趣城市

citylimit: true, // 是否限制在当前城市内搜索

pageSize: 40, // 单页显示结果的条数

pageIndex: 1, // 页码

// location: '', // 经纬度 用逗号隔开的字符串

success: function(data) {

if(data && data.tips) {

that.setData({

poisList: data.tips

})

}

}

})

},

// 检索周边的POI

getPOIAround(search) {

const AMapWx = new amapFile.AMapWX({key: AMapKey_WX})

const that = this

let { longitude, latitude } = this.data

AMapWx.getPoiAround({

querykeywords: search, // 检索关键词

location: `${longitude},${latitude}`,

success: function(res) {

console.log('检索成功')

console.log(res)

that.poisList = res.poisData

},

fail: function(res) {

console.log(res)

}

})

}

})