推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
微信小程序之地图周边（使用百度地图接口）
发布时间:2021-01-09
作者：花罚，来自原文地址原理当前百度和高德周边查询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
<!-- index.wxml --> <map id="map" longitude="113.324520" latitude="23.099994" scale="14" style="width: 100%; height: {{height}}px;"></map>1
2
3
1
2
3
在js中动态绑定style的高 对于组件的宽度全屏我们可以使用100%进行确定，但是高度全屏100%却不能起到任何效果，对此可以使用小程序的一个接口wx.getSystemInfo进行获取系统的高度，然后再动态绑定到map组件上。js代码如下：
//index.js var app = getApp() Page({ data: { height: 'auto' }, onLoad: function () { //保证wx.getSystemInfo的回调函数中能够使用this var that = this //调用wx.getSystemInfo接口，然后动态绑定组件高度 wx.getSystemInfo({ success: function (res) { that.setData({ height: res.windowHeight }) } }) } })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的使用案例:
//index.js var app = getApp() //引入百度地图api var bmap = require('../../utils/bmap-wx.js') //用于保存BMap.search接口返回的数据 var wxMarkerData = [] Page({ data: { height: 'auto', markers: [], latitude: '', longitude: '' }, onLoad: function () { //保证wx.getSystemInfo的回调函数中能够使用this var that = this //构造百度地图api实例 BMap = new bmap.BMapWX({ ak: '***************' }) //调用wx.getSystemInfo接口，然后动态绑定组件高度 wx.getSystemInfo({ success: function (res) { that.setData({ height: res.windowHeight }) } }) }, //查询当前位置的poi信息 //官方文档上说可以查询指定位置的周边信息 //然而当前源码中却存在一个bug导致不能查询指定位置的周边信息 search:function(e){ var that = this //查询失败，直接打印log var fail = function(data) { console.log(data) } //查询成功后将结果数据动态绑定到页面上 var success = function(data) { wxMarkerData = data.wxMarkerData; that.setData({ markers: wxMarkerData }) that.setData({ latitude: wxMarkerData[0].latitude }) that.setData({ longitude: wxMarkerData[0].longitude }) } //使用百度api查询周边信息 //其中使用到了dataset属性 BMap.search({ query: e.target.dataset.type, success: success, fail: fail }) } })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
