微信小程序 接入腾讯地图

微信小程序 接入腾讯地图两种接法

一、调用微信内置的腾讯地图,获取第三方软件

点击选择按钮获取第三方软件
微信小程序 接入腾讯地图_第1张图片
这个相对简单,用的也比较多,配合以下两个API使用微信小程序 接入腾讯地图_第2张图片
使用之前你需要在app.js中配置权限信息

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  },

在使用地图的页面使用

 chooseMap(){  
    var that = this
    let location = that.data.location
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success (res) { // 获取当前位置的经纬度
         const latitude = res.latitude
         const longitude = res.longitude
       // const latitude = location.lat
       // const longitude = location.lng
        wx.openLocation({
          latitude,
          longitude,
          name:'东莞市虎门镇白沙社区站北路1号',
          scale: 18
        })
      }
     })
  },

如果需要获取具体位置对应的经纬度或者经纬度对应的具体位置,需要接入腾讯位置服务 :https://lbs.qq.com/map/
具体步骤如下

  1. 注册 登入 点击控制台
    微信小程序 接入腾讯地图_第3张图片 点击设置,配置如下,保存
    微信小程序 接入腾讯地图_第4张图片
  2. 点击开发文档
    微信小程序 接入腾讯地图_第5张图片下载核心类,放到项目当中,引入使用
    微信小程序 接入腾讯地图_第6张图片
    微信小程序 接入腾讯地图_第7张图片
    实现如下
routeMap() {
    var that  = this
    wx.getSetting({ // 获取当前的设置
    success(res){
    //这里判断是否有位置权限
      if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
          title: '提示',
          content: '获取位置信息',
          success:function(res){
            if(res.confirm==false){
              return false
            }
            wx.openSetting({ // 打开设置
              success(res) {
              //如果再次拒绝则返回页面并提示
              if (!res.authSetting['scope.userLocation']) {
              wx.showToast({
              title: '此功能需获取位置信息,请重新设置',
              duration: 3000,
              icon: 'none'
              })
              } else {
              //允许授权,调用地图
                that.chooseMap()
                }
              }
            })
          }
          }) 
      } else {
      //如果有定位权限,调用地图
      that.chooseMap()
      }
    }
   })
  },
  chooseMap(){
    var that = this
    let location = that.data.location
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success (res) {
         const latitude = res.latitude
         const longitude = res.longitude
       // const latitude = location.lat
       // const longitude = location.lng
        wx.openLocation({
          latitude,
          longitude,
          name:'东莞市虎门镇白沙社区站北路1号',
          scale: 18
        })
      }
     })
  },

二、找到微信小程序
微信小程序 接入腾讯地图_第8张图片微信小程序 接入腾讯地图_第9张图片
然后进行相应配置开发…

未完待续。。。

在这里插入图片描述

你可能感兴趣的:(微信小程序)