【宝剑出鞘】第六式：调用腾讯地图

效果页面

 

 wxml：

<button bindtap="dianji" type="primary">上传定位</button>
<button style="margin-top: 200rpx;" bindtap="houqu" type="primary">点击获取</button>
<view wx:for="{{shuju}}" wx:key="index">
  <view style="margin-bottom: 20rpx;display: flex;flex-direction: row;justify-content: center;background-color: burlywood;margin-top: 20rpx;border-radius: 30rpx;">
    <view>
      <view>{{item.dizhi}}</view>
      <view>{{item.time}}</view>
    </view>
  </view>
</view>

js:

const util = require('../../tuils/tuil.js')
const chooseLocation = requirePlugin('chooseLocation');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  dianji(){
    const key = ''; //使用在腾讯位置服务申请的key
    const referer = ''; //调用插件的app的名称
    const location = JSON.stringify({
      latitude: 39.89631551,
      longitude: 116.323459711
    });
    const category = '生活服务,娱乐休闲';
    
    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
    });
  },
  houqu(){
    let that = this
    wx.cloud.database().collection('map').get({
      success(res){
        console.log(res)
        that.setData({
          shuju:res.data
        })
      }
      
    })
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    console.log(location)
    console.log(location.province+'-'+location.city+'-'+location.district+'-'+location.name)
    let map = location.province+'-'+location.city+'-'+location.district+'-'+location.name
    var DATE = util.formatTime(new Date());
    wx.cloud.database().collection('map').add({
      data:{
        dizhi:map,
        time:DATE
      },
      success(res){
        console.log(res)
        wx.showToast({
          title: '上传成功，可点击"获取按钮"获取',
          icon:"none"
        })
      }
    })
  },

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

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
            // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
            // chooseLocation.setLocation(null);
  },

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

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

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

wxss:

/**index.wxss**/

page {
  padding-top: 54rpx;
  background-color: #f6f6f6;
  padding-bottom: 60rpx;
}

.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  font-size: 44rpx;
  margin-bottom: 40rpx;
}

.top_tip {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  margin-bottom: 28rpx;
}

.power {
  margin-top: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 93%;
  padding-bottom: 1rpx;
}

.power_info {
  display: flex;
  padding: 30rpx 25rpx;
  align-items: center;
  justify-content: space-between;
}

.power_info_more {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.power_info_less {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(270deg);
}

.power_info_text {
  display: flex;
  flex-direction: column;
}

.power_info_text_title {
  margin-bottom: 10rpx;
  font-weight: 400;
  font-size: 35rpx;
}

.power_info_text_tip {
  color: rgba(0, 0, 0, 0.4);
  font-size: 25rpx;
}

.power_item {
  padding: 30rpx 25rpx;
  display: flex;
  justify-content: space-between;
}

.power_item_title {
  font-size: 30rpx;
}

.power_item_icon {
  width: 30rpx;
  height: 30rpx;
}

.line {
  width: 95%;
  margin: 0 auto;
  height: 2rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

.environment {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-top: 25%;
}