微信小程序实现腾讯地图定位功能修改地址功能

微信小程序实现腾讯地图定位功能修改地址功能

效果图

前言

大家开发小程序的时候都会遇到想使用微信小程序的地图定位功能来精确的知道自己所处的地理位置，这对于外卖，跑腿类小程序是至关重要的。今天我们就来看看如何实现这一功能吧。
要实现精确定位光靠微信自带的地图功能是远远不够的，所以我这里采用了腾讯地图的导入，从而实现了。使用之前大家先去注册一个账号，然后完成以下配置。先登录进去，然后进入控制台，添加应用，设置如下。
腾讯地图官网地址:腾讯地图官网

然后得到 key这是最重要的，我们后面会用到它。
这样我们的准备工作就做好了，开始着手实现起来。

界面结构

我这边做的是一个地址选择定位到相应学校的功能，页面结构代码及效果图如下。

<!--pages/checkSchool/checkSchool.wxml-->
<!-- 弹出选择学校 -->
<view class="adress">当前地址:<text>{{adressObj.province+adressObj.city+adressObj.district}}</text>
  <text class="ico iconfont icon-weizhi" bindtap="changeAddress"></text>
</view>
<view>
  
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" wx:if="{{!bindSchool}}" range-key="title">
    <view class="picker">
    当前选择：<text>{{array[index].title}}</text>
    <image src="../../image/mine/tipp.png"></image>
    </view>
</picker>
<view class="revice_address_row" wx:if="{{!bindSchool}}">
  <view class="address_btn">
    <button class="sureBtn" type="primary" size="mini" bindtap="handleSublme">提交信息审核</button>
  </view>
</view>

点击地址小图标将会跳转到map地图界面

<!--pages/position/position.wxml-->
<!-- 地图 -->
<map id="map4select"
 longitude="{{address.longitude}}" latitude="{{address.latitude}}" 
 scale="20" 
 style="width:100%;height:100vh"
 >
</map>

移动或者搜索地点都可以，选择后点击确定即可返回。

实现思路

按步骤慢慢实现，首先用户进入选择地址页面会显示当前微信定位的位置，然后如果用户需要修改地址，则点击地址小图标进入地图界面，选择修改地址，进入地图界面确定后会得到对应的经纬度信息，并且存储在本地上。然后返回到当前页面，根据获取到的经纬度提供给腾讯地图，腾讯地图再反馈给我们精确的地址信息。从而实现完整的地图功能。

核心代码

进入该页面如果本地存有值则先采用本地值，再根据移动地图来修改对应值。

data: {
    address: {}
  },
//移动选点
moveToLocation: function () {
  var that = this;
  wx.chooseLocation({
    success: function (res) {   
      console.log(res); 
      that.setData({
        ['address.latitude']:res.latitude,
        ['address.longitude']:res.longitude
      }) 
      // console.log(that.data.address);
    wx.setStorageSync('trueCity',that.data.address)
    console.log(that.data.address);
      //选择地点之后返回到原来页面
      wx.navigateBack({
        delta: 1,
      })
    },
    fail: function (err) {
      wx.navigateBack({
        delta: 1,
      })
    }
  });
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const address = wx.getStorageSync('trueCity');
    this.setData({
      address
    })
      this.moveToLocation();
  },

data里的数据，注意有些数据是实现选择学校功能，自己开发的话要根据自己的实际需求来改变哦。

data: {
    array: '',
    arrayAll: [{ id: 0 }],
    index: 0,
    bindSchool:false,
    schoolNames:'',
    schoolNameop:'',
    adressObj: {
      latitude: '',
      longitude: '',
      province: '',
      address: '',
      city: '',
      district: '',
      street: '',
      allCity: '',
      schoolName: ''
    },
    flag: true,
    sameCity: true,
    schoolId:''
  },

点击地址小图标进入修改地址界面

// 修改地址
  changeAddress() {
    console.log('修改地址');
    wx.navigateTo({
      url: '../position/position',
    })
  },

根据经纬度通过腾讯地图获取地址，注意这里的key是前面我们注册申请得到的key

// 坐标获取地址
  getAddress() {
    let that = this;
    // 引入腾讯地图
    let qqmapsdk = new QQMapWX({
      key: 'DI7BZ-...' // 必填
    });
    qqmapsdk.reverseGeocoder({
    //传入经纬度
      location: {
        latitude: that.data.adressObj.latitude,
        longitude: that.data.adressObj.longitude
      },
      //将得到的结果拆分成自己想要的格式，可自己先打印后根据需求决定
      success: function (res) {
        console.log(res.result,'ss');
        let address = res.result.address;
        const addr = `adressObj.address`;
        that.setData({
          [addr]: address,
          ['adressObj.province']: res.result.ad_info.province,
          ['adressObj.city']: res.result.ad_info.city,
          ['adressObj.district']: res.result.ad_info.district,
          ['adressObj.street']: res.result.address_component.street,
          ['adressObj.schoolName']: res.result.address_reference.landmark_l2.title,
        })
        //这样我们需要的数据已经储存好了
        console.log(that.data.adressObj);
        wx.setStorageSync('trueCity', that.data.adressObj);
      },
      fail: function (res) {
        console.log(res);
      }
    });
  }

页面加载后，如果本地存储地址值不为空即之前获取过，可以直接采用上次的结果，如果为空则唤起选择地址功能。获取地址授权后得到经纬度再进行地址校验后得到精确地址。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const obj = wx.getStorageSync('trueCity')
    if (obj.latitude) {
      this.setData({
        adressObj: obj
      })
      return false;
    }
    // 使用 wx.createMapContext 获取 map 上下文
    that.mapCtx = wx.createMapContext('myMap');
    wx.getLocation({
      // 国内只能使用gcj02坐标系，wgs84不能使用；高德地图等都是使用的gcj02
      type: "gcj02",
      success: function (res) {
        // 将地理坐标精确到8位
        let latitude = res.latitude;
        let longitude = res.longitude;
        // if (latitude.length > 8) {
        //   latitude = latitude.substr(0, 8);
        // }
        // if (longitude.length > 8) {
        //   longitude = longitude.substr(0, 8);
        // }
        that.setData({
          ['adressObj.latitude']: latitude,
          ['adressObj.longitude']: longitude
        })
        that.getAddress();
      }
    })
  },

监听页面显示时，判断和本地储存地址信息是否一致，若地址改变则重新修改页面显示的地址信息。这里的flag是控制第一次获取地址改变不用再次获取地址。

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const obj = wx.getStorageSync('trueCity');
    if (this.data.flag) {
      if (obj.longitude != this.data.adressObj.longitude || obj.latitude != this.data.adressObj.latitude) {
        console.log('地址变了');
        this.setData({
          adressObj: obj,
          index: 0
        })
        this.getAddress();
      }
    }
    this.setData({
      flag: true
    })
  },

总结

主要实现功能都在上面了，有不清晰或者不对的地方望大家提出来改正。点个赞吧xdm！