uniapp微信小程序接入高德地图SDK

3,243 阅读2分钟

参考链接:www.jianshu.com/p/d28e073ff…

一、开发文档传送门(包括sdk下载)

lbs.amap.com/api/wx/gett…

image.png

二、小程序地图SDK原理 (注意:这一段要仔细看哦,很多人问我为什么你写的是高德地图SDK,却用的是腾讯地图,答案就在这里)

微信小程序开发,可以使用地图组件map,来进行地图显示、定位、显示大头针等基本功能,具体可以看官方文档:微信小程序map组件

map组件只提供一些基本的“硬件”,还需要“大脑”来驱动这些“硬件”。这个“大脑”就是腾讯地图、百度地图和高德地图提供的小程序SDK。其实这些SDK只是提供了一些网络请求接口,请求这些接口,能获得对应结构的网络数据,再驱动map组件来渲染。

比如线路规划:从A到B,只要确定起点经纬度和终点经纬度,传给SDK,SDK里就会发起网络请求,获得最佳路线,返回给你从A到B所途经的转折点经纬度数组,你把得到的经纬度数组传给map组件,map就能绘制路线。

高德SDK接口列表

高德地图提供的接口有:

方法用途
getPoiAround(Object)获取周边的POI。 querykeywords、location、querytypes 字段于 1.1.0 版本新增。
getRegeo(Object)获取地址描述信息。 location 字段于 1.1.0 版本新增。
getWeather(Object)获取天气情况(实时和预报)。type、city字段于 1.1.0 版本新增。
getStaticmap(Object)获取静态的地图图片。 getStaticmap(Object) 方法于 1.1.0 版本新增。
getInputtips(Object)获取提示词。 getInputtips(Object) 方法于 1.2.0 版本新增。
getDrivingRoute(Object)获取驾车路线。 getDrivingRoute(Object) 方法于 1.2.0 版本新增。
getWalkingRoute(Object)获取步行路线。 getWalkingRoute(Object) 方法于 1.2.0 版本新增。
getTransitRoute(Object)获取公交路线。 getTransitRoute(Object) 方法于 1.2.0 版本新增。
getRidingRoute(Object)获取骑行路线。 getRidingRoute(Object) 方法于 1.2.0 版本新增。

具体接口用法,参考高德官方文档: AMapWX基本方法

三、接入SDK

首先:

设置安全通讯域名

image.png

下载sdk

新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js  从下载地址页面下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,

image.png

具体运用:

<template>
	<view class="content">
            {{title}}
	</view>
</template>

<script>
    var amapFile = require('../../libs/amap-wx.js'); //引入并声明SDK对象
    export default {
        data() {
                return {
                        title: 'hello world'
                }
        },
        onLoad() {

        },
        methods: {
                getAddres(){
                        var myAmapFun = new amapFile.AMapWX({key:'5705b6e903e8158dceaac9baa75fabcc'});
                        myAmapFun.getRegeo({
                          success: function(data){
                                //成功回调
                                console.log(data)
                          },
                          fail: function(info){
                                //失败回调
                                console.log(info)
                          }
                        })
                }
        },
        mounted(){
                this.getAddres()
        }
    }
</script>

<style>
</style>

效果:

image.png

出现的小插曲(报错了),如下:

image.png

原因:

通过查阅高德文档 错误码说明, 知道了

image.png

所以说,是 控制台申请key 这里出问题了:

image.png

解决办法:

重新创建key

image.png

替换key,问题解决