小程序 - 可搜索的地址选择

最终实现效果：

效果实现步骤图

新建index文件夹

• index.wxml

<!--pages/index/index.wxml-->
<view class='container'>
  <view bindtap='onChangeAddress'>
    <input value="{{address}}" name="address" placeholder="选择地点">
  </view>
</view>

• index.js

// pages/index/index.js
Page({
  data: {
    address: ''
  },
  onChangeAddress() {
    var _page = this;
    wx.chooseLocation({
      success: (res) => {
        _page.setData({
          address: res.name
        });
      },
      fail: (err) => {
        console.log(err);
      }
    });
  }
})

新建map文件夹

• map.wxml

<!--pages/map/map.wxml-->
<view class="container">
  <map
    id="myMap"
    style="width: 100%; height: 100%;"
    latitude="{{latitude}}"
    longitude="{{longitude}}"
    markers="{{markers}}"
    show-location
  ></map>
</view>

• map.js

// pages/map/map.js
Page({
  data: {
    latitude: 31.22786,
    longitude: 121.46658,
    markers: [{
      id: 1,
      latitude: 31.22786,
      longitude: 121.46658,
      name: '上海招商局广场'
    }]
  },
  onReady(e) {
    this.mapCtx = wx.createMapContext('myMap')
  }
})