用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序周边配套的实现

Rolan 2019-10-24 00:50

一 需求分析:以该小区为中心,实现周边配套的检索,切换不同种类的检索条件,刷新页面,并以气泡的方式显示出来,效果如下~二 实现方式:底部我是用的vant组件的tabbar来实现切换显示下载微信小程序JavaScriptSDK引 ...

一 需求分析:

以该小区为中心,实现周边配套的检索,切换不同种类的检索条件,刷新页面,并以气泡的方式显示出来,效果如下~

二 实现方式:

底部我是用的vant组件的tabbar来实现切换显示 
下载微信小程序JavaScriptSDK 
引入SDK,并且实例化API核心类

  1. var QQMapWX = require('../../../libs/qqmap-wx-jssdk.js')
  2. var app = getApp()
  3. // 实例化API核心类
  4. var qqmapsdk = new QQMapWX({
  5. key: app.globalData.map_key // 必填
  6. });
  7. 当切换底部标签时,获取要搜索的关键字,调用接口,实现搜索
  8. // 事件触发,调用接口
  9. nearby_search: function() {
  10. var _this = this;
  11. // 调用接口
  12. qqmapsdk.search({
  13. keyword: _this.data.kewWord, //搜索关键词
  14. location: {
  15. latitude: _this.data.lat,
  16. longitude: _this.data.lng
  17. }, //设置周边搜索中心点
  18. success: function(res) { //搜索成功后的回调
  19. var mks = []
  20. //在此将小区的位置坐标点加载出来
  21. mks.push({
  22. latitude: _this.data.lat,
  23. longitude: _this.data.lng
  24. })
  25. for (var i = 0; i < res.data.length; i++) {
  26. mks.push({ // 获取返回结果,放到mks数组中
  27. title: res.data[i].title,
  28. id: res.data[i].id,
  29. latitude: res.data[i].location.lat,
  30. longitude: res.data[i].location.lng,
  31. iconPath: _this.data.img, //图标路径
  32. width: 24,
  33. height: 28,
  34. callout : {
  35. color : "#fff",
  36. padding : 8,
  37. content: res.data[i].title,
  38. borderRadius : 5,
  39. bgColor: "#3072f6",
  40. fontSize : 12
  41. }
  42. })
  43. }
  44. _this.setData({ //设置markers属性,将搜索结果显示在地图中
  45. markers: mks
  46. })
  47. },
  48. fail: function(res) {
  49. console.log(res);
  50. },
  51. complete: function(res) {
  52. console.log(res);
  53. }
  54. });
  55. },

到这里基本上就实现了周边配套的需求,现在你需要做的不过是,规整一下整体逻辑和交互,当点击图标会出现气泡框,具体气泡的显示方式参照微信小程序的map组件即可

作者:DevinZ 

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: DevinZ 来自: 简书