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

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

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

一、获取高德Key

配置高德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