說明

因專案需要，該功能類似於微信朋友圈釋出時的選擇位置

思路

可使用第三方地圖服務商的API，根據當前位置查詢POI列表，再展示在小程式的介面上

程式碼實現

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

2、設定安全通訊域名

相關程式碼

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

下面沒有了，以上就是效果實現的核心程式碼！！ 附上微信小程式官方教程 —— [ 微信小程式API ]