前言
最近在捣腾小程序，想开发一个自己的小程序，过一把独立开发的瘾。
自己设计，自己搞数据，自己找图标，自己决定要或者不要什么功能，完全跟着心走，目前体验下来，感觉还是蛮爽的。比在公司产品要你做什么你就得做什么舒服多了，巴适的很（假装自己是四川人），哈哈
膨胀.jpg
虽然我是一个App开发，但我还是蛮注重用户体验的，我会去考虑应用的使用场景，使用习惯，不断的去调整，去优化。这次开发的小程序，从配色、图标选择、UI设计，到页面结构、功能等都花了很多心思。欢迎体验，吐槽。
image.png
呀！一不小心扯远了，回归主题！
小程序地图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下载地址
下载完后，直接将amap-wx.js文件拖到工程libs目录下，这个目录随便建的，一定要放到miniprogram文件夹内，任何位置都可以，不然找不到。如图：
image.png
引用：
1.在js文件开头引入并声明SDK对象
image.png
2.我把不相关代码删掉后，获得高德当前位置天气情况，大概就是这样子的：
// miniprogram/pages/home/home.js
var amapFile = require('../../libs/amap-wx.js');
Page({
/**
* 页面的初始数据
* 本地图："../../images/hz_metro_map.png"
* 网络图：
*/
data: {
weatherInfo: null,
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this._getWeather();
},
/**
* 获取天气信息
*/
_getWeather: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: '高德地图key' });
myAmapFun.getWeather({
success: function (data) {
//成功回调
console.log(data)
},
fail: function (info) {
//失败回调
console.log(info)
}
})
}
})
这样就拿到了高德的数据，超级简单有木有。
遇到的坑
虽然很简单，但是使用起来，还是发现有坑。使用getPoiAround接口时，发现没有分页功能。其实高德服务度接口是有分页功能的，但是小程序SDK里并没有把page参数暴露出来，坑啊。我使用的SDK版本是:sdkversion: "1.2.0"
解决办法：在amap-wx.js文件里，找到getPoiAround接口，往参数里添加一个page字段即可，如下图：
image.png
这样就能正常分页了。
到此就说完了，也就那么回事。
欢迎扫上面小程序码，体验我的小程序，多多吐槽，我将继续优化。谢谢！
网友评论