作者:花罚,来自原文地址原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接 ...
作者:花罚,来自原文地址
原理
当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。
步骤
1. 创建地图容器
微信小程序创建地图容器相对来说比较简单,只需要一个map组件即可,下面代码将完成地图容器的创建:
- wxml代码
- 1
- 2
- 1
- 2
-
map组件简介
map组件默认使用腾讯地图,只要在wxml中书写
- longitude & latitude 这两个属性一般都是成对出现,用于初始化地图中心位置
- scale 该属性表示地图的缩放级别,数字越大比例尺越小。根据文档上说默认值为:16
2. 地图容器全屏
上面的代码已经可以正常的创建地图容器了,但是所创建的地图大小不够,所以我们需要给map组件配上style属性,style属性是wxml中几乎所有组件均支持的属性,主要用于给主键配置显示效果。以下地图全屏代码同时适用于wxml的其他组件: - 在map组件上加上style
- 1
- 2
- 3
- 1
- 2
- 3
-
在js中动态绑定style的高 对于组件的宽度全屏我们可以使用100%进行确定,但是高度全屏100%却不能起到任何效果,对此可以使用小程序的一个接口
wx.getSystemInfo
进行获取系统的高度,然后再动态绑定到map组件上。js代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3. 引入百度地图小程序api
- 下载bmap-wx.js
- 解压后将bmap-wx.js放入小程序工程里面,我这里是创建一个叫utils的文件夹用于保存这些第三方的工具。
-
在js中使用
var bmap = require('../../utils/bmap-wx.js')
引入api
注:在开始使用该api之前,我们还需要去百度地图上获取一个微信小程序专用的key,在获取这个key的时候需要输入目标小程序的appid。
4. 使用api获取周边信息
BMap.search
接口是用于获取周边信息的接口,官方描述为:查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
首先,我们来看一个BMap.search
的使用案例:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
从上面代码中可以看出我们为了使用该接口,在页面数据中加入了三个数据:latitude、longitude和markers,分别用于保存当前poi位置和周边信息的标记。还有看到我们在在page外申明了两个变量,bmap和wxMarkerData, 分别保存当前页面的api入口,poi接口返回数据。由于页面增加数据了,所以对应的页面也需要做出相应的变化,需要对map组件进行简单的修改:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
同时添加了两个简单的wxss,这个wxss是给地图脚下增加的一个简单的导航样式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
以上就完成了一个简单的地图周边组件,优化一下显示效果就差不多可以用了。当前还有一个问题就是百度api的bug问题,该bug如果不进行修复,那么将一直只能查询当前地址的周边信息,另外我查看了高德地图的poi周边接口,该接口就直接不提供指定位置的周边信息查询。