关于小程序中地图的应用（联动搜索，模糊查询，定位导航）

一、获取微信地址

• 在小程序的开发中，内置了获取微信地址的API接口。我们可以直接调用，对返回的数据进行相关的处理即可。代码如下：

    <view class="wx_address flex_c_m" bindtap='weChat'>
      <text class="iconfont iconweixin1"></text>
      <text class="we_address">获取微信收货地址</text>
    </view>

  // 获取微信地址
  weChat() {
    let that = this;
    wx.getSetting({
      success(res) {
        console.log("vres.authSetting['scope.address']：", res.authSetting['scope.address'])
        if (res.authSetting['scope.address']) {
          wx.chooseAddress({
            success(res) {
              console.log(res.userName)
              console.log(res.postalCode)
              console.log(res.provinceName)
              console.log(res.provinceName)
              console.log(res.countyName)
              console.log(res.detailInfo)
              console.log(res.nationalCode)
              console.log(res.telNumber)
              let obj = {
                TakeMan: res.userName,
                TakeTel: res.telNumber,
                TakeProvince: res.provinceName,
                TakeCity: res.cityName,
                TakeArea: res.countyName,
                TakeAddress: res.detailInfo,
                TakeBuildingNo: "",
                IsDefault: false,
                CommunityName: "",
                CommunityAddress: "",
                TakeLongitude: "",
                TakeLatitude: ""
              }
              http.requestLoading('api/services/app/ShopMemerShippingAddressService/AddMemerShippingAddress', obj, '', 'POST').then(res => {
                console.log(res)
                if (res.data.Result.Code == 0) {
                  wx.showToast({
                    title: '获取微信地址成功',
                    icon: 'none'
                  })
                  that.getAddressList();
                }
              })
            }
          })
          // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
        } else {
          if (res.authSetting['scope.address'] == false) {
            wx.openSetting({
              success(res) {
                console.log(res.authSetting)
              }
            })
          } else {
            wx.chooseAddress({
              success(res) {
                console.log(res.userName)
                console.log(res.postalCode)
                console.log(res.provinceName)
                console.log(res.cityName)
                console.log(res.countyName)
                console.log(res.detailInfo)
                console.log(res.nationalCode)
                console.log(res.telNumber)
                // that.setData({
                //   userName: res.userName,
                //   provinceName: res.provinceName,
                //   cityName: res.cityName, //第二级地址
                //   countyName: res.countyName, //第三级地址
                //   detailInfo: res.detailInfo, //详细收货地址信息
                //   telNumber: res.telNumber //收货人手机号码
                // })
              }
            })
          }
        }
      }
    })
  }

• 效果图如下：
  

二、联动搜索及模糊查询

• 在项目中实现选择省市区，根据选择的内容进行更详细的地址。详细地址可以通过搜索查到，具体代码如下：

    <view class="address_top">
      <view class="wx_address flex_c_m" bindtap='weChat'>
        <text class="iconfont iconweixin1"></text>
        <text class="we_address">获取微信收货地址</text>
      </view>
      <view class="personal">
        <view class="personal_list">
          <view class="personal_data">
            <text class="personal_data_type">收货人</text>
            <input class="zc_input" bindinput="inputValue" value="{{userName}}" placeholder="请填写收货人姓名"></input>
          </view>
        </view>
        <view class="personal_list">
          <view class="personal_data">
            <text class="personal_data_type">手机号码</text>
            <input class="zc_input" bindinput="telNumber" value="{{telNumber}}" placeholder="请填写联系方式"></input>
          </view>
        </view>
        <view class="personal_list">
          <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
            <view class="personal_data">
              <text class="personal_data_type">所在地址</text>
              <view class="picker">
                <text class="address">{{region.length ? (region[0]+'-'+region[1]+'-'+region[2]) : ''}}</text>
                <text class="iconfont iconxiangshang-copy toushustore_right"></text>
              </view>
            </view>
          </picker>
        </view>
        <view class="personal_list">
          <view class="personal_data" bindtap='onChangeAddress'>
            <text class="personal_data_type">详细地址</text>
            <input class="zc_input_txt" placeholder="请输入所在小区/大厦/学校 等" value="{{chooseAddress}}"></input>
            <text class="iconfont iconxiangshang-copy toushustore_right"></text>
          </view>
        </view>
        <view class="personal_list">
          <view class="personal_data">
            <text class="personal_data_type">楼牌号</text>
            <input class="zc_input_txt" value="{{IDNo}}" maxlength="18" placeholder="请输入楼号/门牌号" bindinput="idNo"></input>
          </view>
        </view>
      </view>
    </view>
    <view style="height:30rpx;"></view>
    <view class="switch flex_lr_m">
      <view>设为默认地址</view>
      <view>
        <switch checked="{{switch1Checked}}" bindchange="switch1Change" color="#FEB1C6" />
      </view>
    </view>
    <!-- 保存收货地址 -->
    <view class="add_address flex_c_m" bindtap="Preservation">
      <text class="add_txt">保存</text>
    </view>

• 这里需要说明一下，需要引入腾讯地图的SDK。借助SDK实现将省市区转为经纬度，从而实现联动的效果。模糊查询是借助内置的API实现的。

// pages/shoppingMall/Addaddress/Addaddress.js
const http = require('../../../server/request.js');
const QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js');
const app = require('../../../utils/uselogn.js'); //获取应用实例
// 引入SDK核心类
// 实例化API核心类
let qqMap = new QQMapWX({
  key: 'PIQBZ-VC6L5-6MRIU-QXQJE-BOVHK' // 必填
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userName: '', //收货人姓名
    provinceName: '', //国标收货地址第一级地址
    cityName: '', //国标收货地址第二级地址
    countyName: '', //国标收货地址第三级地址
    detailInfo: '', //详细收货地址信息
    telNumber: '', //收货人手机号码
    region: [],
    switch1Checked: false,
    chooseAddress: '',
    IDNo: '',
    lng: '',
    lat: '',
    isshop: true, //判断来源
    i:''
  },
  onLogin: app.userLogin,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    if (Object.keys(options).length == 0) {
      console.log("空对象")
    } else {
      console.log("非空对象")
      this.setData({
        isshop: false,
        i: options.index
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.onLogin(this.authCallback);
  },
  authCallback: function() {

  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  // 获取微信地址
  weChat() {
    let that = this;
    wx.getSetting({
      success(res) {
        console.log("vres.authSetting['scope.address']：", res.authSetting['scope.address'])
        if (res.authSetting['scope.address']) {
          wx.chooseAddress({
            success(res) {
              console.log(res.userName)
              console.log(res.postalCode)
              console.log(res.provinceName)
              console.log(res.provinceName)
              console.log(res.countyName)
              console.log(res.detailInfo)
              console.log(res.nationalCode)
              console.log(res.telNumber)
              let region = [];
              region.push(res.provinceName, res.countyName, res.countyName)
              that.setData({
                userName: res.userName,
                telNumber: res.telNumber, //收货人手机号码
                region: region,
                chooseAddress: res.detailInfo
              })
            }
          })
          // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
        } else {
          if (res.authSetting['scope.address'] == false) {
            wx.openSetting({
              success(res) {
                console.log(res.authSetting)
              }
            })
          } else {
            wx.chooseAddress({
              success(res) {
                console.log(res.userName)
                console.log(res.postalCode)
                console.log(res.provinceName)
                console.log(res.cityName)
                console.log(res.countyName)
                console.log(res.detailInfo)
                console.log(res.nationalCode)
                console.log(res.telNumber)
              }
            })
          }
        }
      }
    })
  },
  //地区选择
  bindRegionChange: function(e) {
    console.log('picker发送选择改变，携带值为', e)
    this.setData({
      region: e.detail.value
    })
    console.log(e.detail.value[0] + e.detail.value[1] + e.detail.value[2])
    qqMap.geocoder({
      address: e.detail.value[0] + e.detail.value[1] + e.detail.value[2],
      complete: (res => {
        console.log(res.result.location); //经纬度对象
        this.setData({
          lng: res.result.location.lng,
          lat: res.result.location.lat
        })
      })
    })
  },
  // 是否默认
  switch1Change(e) {
    console.log(e)
    this.setData({
      switch1Checked: e.detail.value
    })
  },
  // 保存收货地址
  Preservation() {
    let parm = {
      TakeMan: this.data.userName,
      TakeTel: this.data.telNumber,
      TakeProvince: this.data.region[0],
      TakeCity: this.data.region[1],
      TakeArea: this.data.region[2],
      TakeAddress: this.data.chooseAddress,
      TakeBuildingNo: this.data.IDNo,
      IsDefault: this.data.switch1Checked,
      CommunityName: "",
      CommunityAddress: "",
      TakeLongitude: "",
      TakeLatitude: ""
    }
    console.log(parm)
    http.requestLoading('api/services/app/ShopMemerShippingAddressService/AddMemerShippingAddress?__shop__=4aa5b012-65aa-4f1c-be1f-c7c5852dee7b', parm, '', 'POST').then(res => {
      console.log(res)
      if (res.data.Result.Code == 0) {
        wx.showToast({
          title: '地址保存成功',
          icon: 'none'
        })
        if (this.data.i == 1) {
          wx.setStorageSync('addreass', parm)
          wx.navigateBack({
            delta: 2
          })
        } else if (this.data.i == 2) {
          wx.setStorageSync('addreass1', parm)
          wx.navigateBack({
            delta: 2
          })
        } else {
          setTimeout(() => {
            wx.navigateTo({
              url: '/pages/shoppingMall/shippingAddress/shippingAddress',
            })
          }, 500)
        }
      }
    })
  },
  //移动选点
  onChangeAddress: function() {
    var _page = this;
    wx.chooseLocation({
      latitude: _page.data.lat,
      longitude: _page.data.lng,
      success: function(res) {
        _page.setData({
          chooseAddress: res.name
        });
      },
      fail: function(err) {
        console.log(err)
      }
    });
  },
  // 楼牌号
  idNo(e) {
    console.log(e.detail.value)
    this.setData({
      IDNo: e.detail.value
    })
  },
  // 收货人
  inputValue(e) {
    this.setData({
      userName: e.detail.value
    })
  },
  // 手机号
  telNumber(e) {
    this.setData({
      telNumber: e.detail.value
    })
  }
})

• 效果图如下所示：
  

三、导航

• 导航可以利用小程序自带的API去实现，通过传递不同的参数来控制目的地不同。代码如下：

    <view class="receiv flex_lr_m" bindtap="click">
      <text class="receiv_name">提货地点</text>
      <view class="dib receiv_address">{{shoplists.StoreAddress}}</view>
      <text class="iconfont icondizhi1"></text>
    </view>

  // 导航
  click() {
    console.log(1)
    let that = this;
    let lat = that.data.shoplists.Latitude;
    let long = that.data.shoplists.Longitude;
    wx.getLocation({ //获取当前经纬度
      type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        console.log(typeof latitude, longitude, res, typeof lat, parseFloat(long))
        wx.openLocation({ //​使用微信内置地图查看位置。
          latitude: latitude, //要去的纬度-地址
          longitude: longitude, //要去的经度-地址
          name: that.data.shoplists.StoreAddress,
          address: that.data.shoplists.StoreAddress
        })
      }
    })
  }

• 效果图如下：