参考链接:www.jianshu.com/p/d28e073ff…
一、开发文档传送门(包括sdk下载)
二、小程序地图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
首先:
设置安全通讯域名
下载sdk
新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js 从下载地址页面下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,
具体运用:
<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>
效果:
出现的小插曲(报错了),如下:
原因:
通过查阅高德文档 错误码说明, 知道了
所以说,是 控制台申请key 这里出问题了:
解决办法:
重新创建key
替换key,问题解决