小程序怎么能实现类似朋友圈定位的功能-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

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

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

说明

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

思路

可使用第三方地图服务商的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://kswsj.cn/article/jphcgs.html

其他资讯