在開始開發前有幾步必要步驟：

1.進入高德地圖API官網，登陸，開發支援-微信小程式SDK，控制檯，應用管理，建立開發需要的key。注意：服務平臺，必須是微信小程式。key用於什麼開發就建立什麼平臺Key。

2.下載 amap-wx.js開發包，https://lbs.amap.com/api/wx/download

3.登入微信公眾平臺，在 "設定"－>"開發設定" 中設定 request 合法域名，將 https://restapi.amap.com 中新增進去

完成以上步驟就可以開始了：

WXML：

<view class="section">
  <input bindinput="bindInput" placeholder="搜尋" focus="true" value='{{AddressName}}'/>
  <button class='btn-Wc' size='mini' type='primary' bindtap='SetSession'>確定</button>
  <!-- <view class='View_Bk'></view> -->
</view>
<view bindtouchstart="bindSearch" data-keywords="{{i.name}}" data-location="{{i.location}}" class="text_box" wx:for="{{tips}}" wx:for-item="i">
  {{i.name}}
</view>
<view wx:if="{{AddressName==''}}">
</view>
<view wx:if="{{AddressName!=''}}">
  <text>位置：{{AddressName}}\n經緯度座標:{{AddressLocation}}</text>
</view>
 

WXSS：

/* pages/AMapWX/DHMap/DHMap.wxss */
.section{
  height: 25px;
  width: 100%;
}
.section input{
  width:70%;
  position: absolute;
  left: 48rpx;
  top: 18rpx;
  border:1px solid #c3c3c3;
  height:25px;
  border-radius: 3px;
  padding: 0 5px;
}
.text_box{
  margin: 10px 25px;
  border-bottom:1px solid #c3c3c3;
  padding-bottom:10px
}
.btn-Wc{
  margin-right: 10rpx;
  position: absolute;
  top: 16rpx;
  right: 20rpx;
}
.img_Ss{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
  }
 

JS：

var amapFile = require('../../lib/amap-wx.js');
var config = require('../../lib/config.js');

Page({
  data: {
    tips: {},
    AddressName: '',
    AddressLocation: ''
  },
  onLoad: function() {

  },
  bindInput: function(e) {
    var that = this;
    var keywords = e.detail.value;
    var key = config.Config.key;
    var Addresscity = wx.getStorageSync("Addressl")
    var MyAmapFun = new amapFile.AMapWX({
      key: '建立Key'
    });
    MyAmapFun.getInputtips({
      keywords: keywords,
      //city: Addresscity, //已使用機器當前位置編碼 為優先搜尋
      location: '',
      success: function(data) {
        // console.log(data)
        if (data && data.tips) {
          that.setData({
            tips: data.tips
          });
        }
      }
    })
  },

  bindSearch: function(e) {
    console.log(e)
    var keywords = e.target.dataset.keywords;
    var location = e.target.dataset.location;
    console.log(keywords);
    console.log(location);
    var that = this;
    // var text = this.data.tips;
    // console.log(text);
    that.setData({
      AddressName: keywords,
      AddressLocation: location
    })
    // wx.setStorageSync("addressName", keywords)
  },
})
 

效果圖：

下章整合定位，搜尋，路線規劃。