小程序怎么能實現(xiàn)類似朋友圈定位的功能-創(chuàng)新互聯(lián)

這篇文章主要介紹了小程序怎么能實現(xiàn)類似朋友圈定位的功能，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián) - 資陽主機托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機，成都云主機，西南云主機，資陽主機托管，西南服務(wù)器托管，四川/成都大帶寬，成都機柜租用，四川老牌ＩＤＣ服務(wù)商

說明

因項目需要，該功能類似于微信朋友圈發(fā)布時的選擇位置

思路

可使用第三方地圖服務(wù)商的API，根據(jù)當前位置查詢POI列表，再展示在小程序的界面上

##效果：

代碼實現(xiàn)

1、申請Key，并下載核心SDK

此步參照官方說明。
高德：https://lbs.amap.com/
百度：http://lbsyun.baidu.com/
騰訊：https://lbs.qq.com/
本案以高德為例。
下載地址：https://lbs.amap.com/api/wx/download

2、設(shè)置安全通訊域名

登錄微信公眾平臺，在 “設(shè)置”－>”開發(fā)設(shè)置” 中設(shè)置 request 合法域名，將 https://restapi.amap.com 中添加進去。如下圖所示：

相關(guān)代碼

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

感謝你能夠認真閱讀完這篇文章，希望小編分享小程序怎么能實現(xiàn)類似朋友圈定位的功能內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細的解決方法等著你來學(xué)習(xí)!

當前題目：小程序怎么能實現(xiàn)類似朋友圈定位的功能-創(chuàng)新互聯(lián)
文章源于：http://muchs.cn/article38/dpeepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、網(wǎng)站維護、定制開發(fā)、網(wǎng)頁設(shè)計公司、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)