uni-app 微信小程序接入高德SDK

参考文档:https://lbs.amap.com/api/wx/gettingstarted

一、获取高德Key

配置高德key

二、获取高德key的操作步骤

  • 创建应用
    进入控制台,创建一个新应用。如果您之前已经创建过应用,可直接跳过这个步骤。
  • uniapp 如何继承android 三方sdk uniapp添加第三方sdk_数据


  • uniapp 如何继承android 三方sdk uniapp添加第三方sdk_微信小程序_02

  • 添加新key
    在创建的应用上点击"添加新Key"按钮。在弹出的对话框中,输入Key名称,选择绑定的服务平台为“微信小程序”,如下图所示:
  • uniapp 如何继承android 三方sdk uniapp添加第三方sdk_小程序_03

三、下载并安装微信小程序SDK

  • 微信小程序SDK
  • 解压后得到 amap-wx.js 文件,将 amap-wx.js 文件拷贝到 项目下,完成安装。

四、设置安全通讯域名

  • 为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。
  • 登录微信公众平台,在 “设置”->“开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:

uniapp 如何继承android 三方sdk uniapp添加第三方sdk_微信小程序_04

五、获取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 的详细信息

uniapp 如何继承android 三方sdk uniapp添加第三方sdk_uni-app_05

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 的形式显示在地图上,并通过逆地理编码请求,获取该位置的详细的地址信息,以文本形式显示

uniapp 如何继承android 三方sdk uniapp添加第三方sdk_数据_06

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

将天气情况以文本形式显示

uniapp 如何继承android 三方sdk uniapp添加第三方sdk_数据_07

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

uniapp 如何继承android 三方sdk uniapp添加第三方sdk_小程序_08