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)
}
})
}
})
