微信小程序：高德地图搜索周边poi接口实践

近期一直在研究小程序地图组件开发，使用的是高德微信小程序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: '200300',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组件的数据协议返回的，无需自己额外处理。这样大大增加了开发效率。也许是我个人比较偏爱他吧

微信小程序：高德地图搜索周边poi接口实践相关推荐

高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
right 微信小程序_微信小程序高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
微信小程序---高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
微信小程序高德地图知道两点求道路_微信小程序——计算2点之间的距离
关于计算2点之间的距离都依赖了腾讯地图,所以请先在下面具体讲计算2点之间距离的方法. 方法一: getPosition: function() {var that = this; wx.getLoc ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
高德地图-搜索服务-POI搜索
高德地图-搜索服务-POI搜索之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置 ...
uniapp微信小程序使用地图选点插件
uniapp使用腾讯位置服务地图选点文章目录 uniapp使用腾讯位置服务地图选点效果图 1. 在公众平台申请插件 2. 引入插件 3. 设置定位授权: 4. 使用插件效果图 1. 在公众平台申 ...
微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...

微信小程序：高德地图搜索周边poi接口实践

微信小程序：高德地图搜索周边poi接口实践相关推荐

最新文章

热门文章