小程序怎么能实现类似朋友圈定位的功能-创新互联

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

创新互联 - 资阳主机托管，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，资阳主机托管，西南服务器托管，四川/成都大带宽，成都机柜租用，四川老牌ＩＤＣ服务商

说明

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

思路

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

##效果：

代码实现

1、申请Key，并下载核心SDK

此步参照官方说明。
高德：https://lbs.amap.com/
百度：http://lbsyun.baidu.com/
腾讯：https://lbs.qq.com/
本案以高德为例。
下载地址：https://lbs.amap.com/api/wx/download

2、设置安全通讯域名

登录微信公众平台，在 “设置”－>”开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去。如下图所示：

相关代码

wxml

<view class='container'>
  <view class="weui-panel weui-panel_access">
    <view class="weui-panel__bd">
      <view class="weui-search-bar">
        <view class="weui-search-bar__form">
          <view class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
            <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
              <icon type="clear" size="14"></icon>
            </view>
          </view>
          <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
            <icon class="weui-icon-search" type="search" size="14"></icon>
            <view class="weui-search-bar__text">搜索</view>
          </label>
        </view>
        <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
      </view>
      <view class="weui-media-box weui-media-box_text">
        <view class="weui-media-box__title weui-media-box__title_in-text">不显示位置</view>
      </view>
      <block wx:for="{{markersData}}" wx:key="*this">
        <view class="weui-media-box weui-media-box_text">
          <view class="weui-media-box__title weui-media-box__title_in-text color-blue">{{item.name}}</view>
          <view class="weui-media-box__desc">{{item.address}}</view>
        </view>
      </block>
    </view>
  </view>
</view>

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
        })
      }
    })
  }
})

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

当前题目：小程序怎么能实现类似朋友圈定位的功能-创新互联
文章源于：https://www.cdcxhl.com/article38/dpeepp.html

成都网站建设公司_创新互联，为您提供移动网站建设、手机网站建设、网站维护、定制开发、网页设计公司、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联