uni-app
微信小程序接入高德SDK
一、获取高德Key
二、获取高德key的操作步骤
- 创建应用
进入控制台,创建一个新应用。如果您之前已经创建过应用,可直接跳过这个步骤。 - 添加新key
在创建的应用上点击"添加新Key"按钮。在弹出的对话框中,输入Key名称,选择绑定的服务平台为“微信小程序”,如下图所示:
三、下载并安装微信小程序SDK
- 微信小程序SDK
- 解压后得到 amap-wx.js 文件,将 amap-wx.js 文件拷贝到 项目下,完成安装。
四、设置安全通讯域名
- 为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。
- 登录微信公众平台,在 “设置”->“开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:
五、获取POI数据
查找您当前位置或指定位置周边 “餐饮服务”、“商务住宅”、“生活服务”类型的POI,解决您的吃穿住行问题
SDK 返回 marker 数组,可以直接用来在微信的地图组件上标记,同时,也返回了POI数组用于您的自定义的界面页面展示。
import amap from '@/libs/Gaude/amap-wx.js'
let amapPlugin = new amap.AMapWX({
key: '开发密钥'
})
let getPoiAround = () => {
return new Promise((resolve, reject) => {
amapPlugin.getPoiAround({
success(res) {
// 成功回调
resolve(res)
},
fail(err) {
// 失败回调
reject(err)
}
})
})
}
export default getPoiAround
将查询结果以 marker 显示在地图上,同时点击 marker 时,以文本显示 marker 的详细信息
6、获取地址详细数据
支持获取定位位置或指定位置的详细地址信息,便于您快速的找到准确该地点
import amap from '@/libs/Gaude/amap-wx.js'
let amapPlugin = new amap.AMapWX({
key: '开发密钥'
})
let getRegeo = () => {
return new Promise((resolve, reject) => {
amapPlugin.getRegeo({
success(res) {
// 成功回调
resolve(res)
},
fail(err) {
// 失败回调
reject(err)
}
})
})
}
export default getRegeo
将当前位置以 marker 的形式显示在地图上,并通过逆地理编码请求,获取该位置的详细的地址信息,以文本形式显示
7、获取实时天气数据
查询指定城市的实时天气和预报天气,帮助您合理安排出行。
import amap from '@/libs/Gaude/amap-wx.js'
let amapPlugin = new amap.AMapWX({
key: '开发密钥'
})
let getWeather = () => {
return new Promise((resolve, reject) => {
amapPlugin.getWeather({
success(res) {
// 成功回调
resolve(res)
},
fail(err) {
// 失败回调
reject(err)
}
})
})
}
export default getWeather
将天气情况以文本形式显示
8、获取输入提示词
输入提示是指根据用户输入的关键词,给出相应的提示信息,将最有可能的搜索词呈现给用户,以减少用户输入信息,提升用户体验。如:输入“方恒”,提示“方恒国际中心A座”,“方恒购物中心”等。
import amap from '@/libs/Gaude/amap-wx.js'
let amapPlugin = new amap.AMapWX({
key: '开发密钥'
})
let getInputtips = (keywords) => {
return new Promise((resolve, reject) => {
amapPlugin.getInputtips({
keywords: keywords,
success(res) {
// 成功回调
resolve(res)
},
fail(err) {
// 失败回调
reject(err)
}
})
})
}
export default getInputtips