小程序之地图周边
原理
当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。
步骤
1. 创建地图容器
微信小程序创建地图容器相对来说比较简单,只需要一个map组件即可,下面代码将完成地图容器的创建:
- wxml代码
<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>
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>
- 在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
})
}
})
}
})
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
})
}
})
从上面代码中可以看出我们为了使用该接口,在页面数据中加入了三个数据:latitude、longitude和markers,分别用于保存当前poi位置和周边信息的标记。还有看到我们在在page外申明了两个变量,bmap和wxMarkerData, 分别保存当前页面的api入口,poi接口返回数据。由于页面增加数据了,所以对应的页面也需要做出相应的变化,需要对map组件进行简单的修改:
<!--index.wxml-->
<view style="width: 100%; height: {{height}}px;">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"
markers="{{markers}}" style="width: 100%; height: {{height-30}}px;"></map>
<view class="nav">
<button bindtap="search" data-type='酒店' class="nav-but">酒店</button>
<button bindtap="search" data-type='美食' class="nav-but">美食</button>
<button bindtap="search" data-type='书店' class="nav-but">书店</button>
<button bindtap="search" data-type='商场' class="nav-but">商场</button>
</view>
</view>
同时添加了两个简单的wxss,这个wxss是给地图脚下增加的一个简单的导航样式
/**index.wxss**/
.nav{
position: fixed;
z-index: 10000;
bottom: 0px;
width: 100%;
height: 30px;
}
.nav-but{
border: cadetblue 1px solid;
border-radius: 0px;
width: 25%;
text-align: center;
line-height: 30px;
display: inline-flex;
}
以上就完成了一个简单的地图周边组件,优化一下显示效果就差不多可以用了。当前还有一个问题就是百度api的bug问题,该bug如果不进行修复,那么将一直只能查询当前地址的周边信息,另外我查看了高德地图的poi周边接口,该接口就直接不提供指定位置的周边信息查询。