小程式如何能實現類似朋友圈定位的功能(高德地圖)

不言
發布: 2018-08-13 16:51:47
原創
4626 人瀏覽過

這篇文章帶給大家的內容是關於小程式如何能實現類似朋友圈定位的功能(高德地圖),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

說明

因專案需要,此功能類似於微信朋友圈發佈時的選擇位置

想法

可使用第三方地圖服務商的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=&#39;container&#39;>
  <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(&#39;../../utils/amap-wx.js&#39;); 
var markersData = [];Page({  data: {    inputShowed: false,    inputVal: "",    markersData: [],    latitude: &#39;&#39;,    longitude: &#39;&#39;
  },  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: &#39;你申请的Key&#39;
    });
    myAmapFun.getPoiAround({      success: function(data) {
        markersData = data.markers;
        that.setData({          markersData: markersData
        });
      },      fail: function(info) {
        wx.showModal({          title: info.errMsg
        })
      }
    })
  }
})
登入後複製

相關推薦:

小程式中如何實作三級選擇器元件? (程式碼範例)

微信小程式實例:微信小程式中彈出視窗的實作程式碼
#

以上是小程式如何能實現類似朋友圈定位的功能(高德地圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板