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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/eadio/article/details/78920196

近期一直在研究小程序地图组件开发，使用的是高德微信小程序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,//是否加载过data
        checked: false,//当前选中的菜单
        types: '110000',
        iconPath: '../../img/spot-spot.png',//markers图标
        iconPathSelected: '',//markers选中的图标
        title: '景点',
        data: []
      },
      {
        id: 2,
        loadData: false,//是否加载过data
        checked: 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();
    //test
     amapFun.getPoiAround({
       querykeywords: '景点',
       querytypes: '110000',
       iconPath: '../../img/spot-spot.png',//指定本地图片
       location: '118.18206,24.51734',//指定搜索厦门五缘湾坐标周边poi
       success(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组件的数据协议返回的，无需自己额外处理。这样大大增加了开发效率。也许是我个人比较偏爱他吧