快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

小程序怎么能实现类似朋友圈定位的功能

这篇文章主要介绍了小程序怎么能实现类似朋友圈定位的功能,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联主打移动网站、网站设计制作、成都做网站、网站改版、网络推广、网站维护、国际域名空间、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。

说明

因项目需要,该功能类似于微信朋友圈发布时的选择位置

思路

可使用第三方地图服务商的API,根据当前位置查询POI列表,再展示在小程序的界面上

##效果:

小程序怎么能实现类似朋友圈定位的功能

相关代码

wxml


  
    
      
        
          
            
            
             0}}" bindtap="clearInput">
              
            
          
          
            
            搜索
          
        
        取消
      
      
        不显示位置
      
      
        
          {{item.name}}
          {{item.address}}
        
      
    
  

js

var amapFile = require('../../utils/amap-wx.js'); 
var markersData = [];Page({  data: {    inputShowed: false,    inputVal: "",    markersData: [],    latitude: '',    longitude: ''
  },  showInput: function() {
    this.setData({      inputShowed: true
    });
  },  hideInput: function() {
    this.setData({      inputVal: "",      inputShowed: false
    });
  },  clearInput: function() {
    this.setData({      inputVal: ""
    });
  },  inputTyping: function(e) {
    this.setData({      inputVal: e.detail.value
    });
  },  onLoad: function(options) {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({      key: '你申请的Key'
    });
    myAmapFun.getPoiAround({      success: function(data) {
        markersData = data.markers;
        that.setData({          markersData: markersData
        });
      },      fail: function(info) {
        wx.showModal({          title: info.errMsg
        })
      }
    })
  }
})

感谢你能够认真阅读完这篇文章,希望小编分享小程序怎么能实现类似朋友圈定位的功能内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!


本文名称:小程序怎么能实现类似朋友圈定位的功能
转载注明:http://6mz.cn/article/jphcgs.html

其他资讯