小程序地图选点之后导航

703 阅读1分钟

1.首先我们要申请一个key

lbs.qq.com/dev/console…
在app.js里面

  globalData: {
    userInfo: null,
    key:'上面所申请的key值'
  }

然后在app.json里面进行如下配置(如果想要更详细的信息请查看官网 lbs.qq.com/miniProgram…

  "permission":{
    "scope.userLocation":{
      "desc":"授权当前位置"
    }
   },
   "plugins": {
    "chooseLocation": {
    "version": "1.0.5",
    "provider": "wx76a9a06e5b4e693e"
    }
    

2.下载qqmap-wx-jssdk.min.js

lbs.qq.com/miniProgram… 打开官网 然后,我们将qqmap-wx-jssdk.min.js放到utils文件夹中 好了。准备工作已做好。下面就由我们看一下代码怎么写吧

在index.wxml中

<view bindtap="getLocation">点击确定去选点导航</view>

在index.js中

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk;
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    latitude: 0,//地图初次加载时的纬度坐标
    longitude: 0, //地图初次加载时的经度坐标
    name: "" //选择的位置名称
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  moveToLocation: function () {
    var that = this;
    wx.chooseLocation({
      // 点击确定选点之后返回的所进行如下操作
      success: function (res) {
      console.log(res)
      wx.openLocation({//​使用微信内置地图查看位置。
        latitude: res.latitude,//要去的纬度-地址
        longitude: res.longitude,//要去的经度-地址
        name: res.name,
        address: res.address
      })
        app.globalData.lat = res.latitude,
        app.globalData.lng = res.longitude
      },
      fail: function (err) {
        console.log(err)
      }
    });
  },
  getLocation:function(){
    qqmapsdk = new QQMapWX({
      key: app.globalData.key//腾讯地图的key
    });
    this.moveToLocation();
  }
})

好了,大功告成!!!