微信小程序：高德API-PoI地址搜索

在开始开发前有几步必要步骤：

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

效果图：

 

下章整合定位，搜索，路线规划。