近期一直在研究小程序地图组件开发,使用的是高德微信小程序sdk查找周边poi数据,并展示到地图上。
根据getPoiAround接口协议传入对应的参数测试发现目前该接口最多只能返回20条数据,不支持分页,重要的是他的第一条数据默认是选中态,如果想要保证所有的图标一致性还得在传入iconPathSelected属性。而这些都在官方上得到了证实:
测试实例代码如下:
js代码:
const Amap=require('../../utils/lib/amap-wx.js');const amapFun = new Amap.AMapWX({ key: '你申请的高德小程序应用key'});Page({data: {lat: '',//用户当前位置lng: '',//用户当前位置scale: 13,//map组件的缩放级别//景区顶图的菜单spotMenu:[{id: 1,loadData: false,//是否加载过datachecked: false,//当前选中的菜单types: '110000',iconPath: '../../img/spot-spot.png',//markers图标iconPathSelected: '',//markers选中的图标title: '景点',data: []},{id: 2,loadData: false,//是否加载过datachecked: false,//当前选中的菜单types: '00',iconPath: '../../img/spot-toilet.png',//markers图标iconPathSelected: '',//markers选中的图标title: '卫生间',data: []}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that=this;wx.setNavigationBarTitle({title: '景区'});//获取用户的位置wx.getLocation({type: 'gcj02',success: function(res) {that.setData({lat: res.latitude,lng: res.longitude});}});//默认获取第一条菜单数据this.getPOI({key: this.data.spotMenu[0].title,types: this.data.spotMenu[0].types,iconPath: this.data.spotMenu[0].iconPath,iconPathSelected: this.data.spotMenu[0].iconPathSelected,index: 0});},//获取周边POI//params:{ key:搜索关键词, index: 要设置的菜单的数据, iconPath: 未选中的图标路径, iconPathSelected: 选中的图标路径, location: '经度,纬度'}getPOI(params){console.log(params)let that=this;let time1=new Date().getTime();//testamapFun.getPoiAround({querykeywords: '景点',querytypes: '110000',iconPath: '../../img/spot-spot.png',//指定本地图片location: '118.18206,24.51734',//指定搜索厦门五缘湾坐标周边poisuccess(res) {//传入/不传iconPath时间差不多 - 因此如果你不需要额外处理markers数据的话采用传入iconPath和iconPathSelected比较划算//console.log(new Date().getTime() - time1);console.log(res);//打印发现第一条数据的iconPath是undefined},fail(err) {console.log(err)wx.showToast({title: err.errMsg});}});return ;}})
这里选择高德小程序的原因,如果只是要使用默认的markers标注点,那么使用它们的sdk是非常方便的,因为他这个接口是基于微信小程序的map组件的数据协议返回的,无需自己额外处理。这样大大增加了开发效率。也许是我个人比较偏爱他吧