【腾讯地图】【微信小程序】地图选点

本文介绍: 官方文档：https://lb s.qq.com/miniProg ram/plugin/pluginGuide/locationPic k er。（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。（前提：已有微信小程序，也就是申请微信公众号中的小程序。查看（获取）微信小程序 Ap pID 流程（点击展开）登录微信小程序（微信公众号）后，左边菜单找到 “文章小尾巴（点击展开）

  "plugins": {
    "chooseLocation": {
      "version": "1.0.10",
      "provider": "wx76a9a06e5b4e693e"
    }
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "requiredPrivateInfos": [
    "getLocation"
  ],

&lt;view style="font-size: larger;font-weight: bold;"&gt;历史记录</view>
<view wx:if="{{historyList.length==0}}">
暂无记录（请进行添加地图选点）
</view>
<view wx:for="{{historyList}}" wx:key="item" wx:index="index">
  <view style="color:rgb(13, 155, 20)">{{index + 1}}.</view>
  <view>经度：<text style="color:red">{{item.longitude}}</text></view>
  <view>纬度：<text style="color:rgb(177, 38, 170)">{{item.latitude}}</text></view>
  <view>具体位置：<text style="color:rgb(0, 2, 128)">{{item.address}}{{item.name}}</text></view>
</view>

<view style="position: absolute;bottom: 40rpx; left: 0;right: 0;margin: auto;">
  <button bindtap="getLocal">地图选点</button>
</view>

// pages/map/map.js
// 参考地址：https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker
const chooseLocation = requirePlugin('chooseLocation');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    historyList: [], // 地图选点历史记录
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},
  getLocal(e) {
    // console.log(e)
    wx.getLocation({ // 返回当前的经度、纬度
      type: 'gcj02',
      success: function (res) {
        // console.log(res)
        var latitude = res.latitude
        var longitude = res.longitude
        const key = 'NE6BZ-ECCKA-FBFKU-CHTRS-OVSAJ-WNBVF'; //使用在腾讯位置服务申请的key
        const referer = '地图选点'; //调用插件的app的名称
        const location = JSON.stringify({ // 初始地址
          latitude,
          longitude
        });
        const category = '生活服务,娱乐休闲';
        wx.navigateTo({
          url: 'plugin://chooseLocation/index?key=' + key + '&amp;referer=' + referer + '&amp;location=' + location + '&amp;category=' + category
        });
      },
      fail: function (err) {
        console.log("err", err)
      }
    })
  },

  // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
  onShow() {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    if (!location) {
      // 为空则直接返回即可
      return;
    }
    let that = this;
    var {
      historyList
    } = that.data;
    historyList.push(location);
    that.setData({
      historyList
    })
  },
  onUnload() {
    // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
    chooseLocation.setLocation(null);
  },
})