微信小程序获取定位、通过地点文本获取经纬度进行导航

{
  "pages": ["pages/index/index"],
  "requiredPrivateInfos": [
      "getLocation",
      "onLocationChange",
      "startLocationUpdateBackground",
      "chooseAddress",
      "chooseLocation",
      "choosePoi"
  ]
}

注：若使用以上接口，均需在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

二、接入腾讯位置服务sdk

文档地址:微信小程序JavaScript SDK | 腾讯位置服务

根据步骤注册，申请密钥

引入sdk.js文件

微信公众平台-开发-开发管理-开发设置配置域名https://apis.map.qq.com

三、权限设置

微信公众平台-开发-开发管理-接口设置去申请权限

四、地理位置方法

1、wx.getLocation（需要获取权限）

功能：获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。

地址：wx.getLocation(Object object) | 微信开放文档

（1）点击弹起授权窗口

（1-1）允许状态

成功获取定位城市

（1-2）拒绝状态（自己写的弹框）

2、wx.chooseLocation （需要权限）

功能：打开地图选择位置

地址： wx.chooseLocation(Object object) | 微信开放文档

3、wx.openLocation

功能：使用微信内置地图查看位置

地址：wx.openLocation(Object object) | 微信开放文档

4、wx.choosePoi

功能：打开 POI 列表选择位置，支持模糊定位（精确到市）和精确定位混选。

地址：wx.choosePoi(Object object) | 微信开放文档

开发助手不支持调试

五、腾讯位置服务

1、search

功能：地点搜索，搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等

地址：微信小程序JavaScript SDK | 腾讯位置服务

2、getSuggestion

功能：用于获取输入关键字的补完与提示，帮助用户快速输入

地址：微信小程序JavaScript SDK | 腾讯位置服务

返回结果

3、reverseGeocoder（可配合wx.getLocation做定位解析）

功能：本接口提供由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表。

地址：微信小程序JavaScript SDK | 腾讯位置服务

拿到定位的经纬度做定位解析处理拿到当前位置

4、geocoder

功能：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。

微信小程序JavaScript SDK | 腾讯位置服务

通过传入名称去查询经纬度从而进行导航处理

5、其他接口

微信小程序JavaScript SDK | 腾讯位置服务

六、完整代码

1、wxml

<view class="testview">
<view bindtap="getLocation"> 点击获取定位城市</view>
<view wx:if="{{city}}">定位城市：{{city}}</view>
<view bindtap="openLocation"> 获取当前位置打开地图</view>
<view bindtap="getopenLocation"> 通过选定位置打开地图</view>
<view bindtap="fixopenLocation">固定经纬度打开地图</view>
<view bindtap="poiLocation">poi打开地图</view>
<view bindtap="gettextlocation">通过文本去查找地图</view>
<view class="iptbox">
  输入内容：<input class="input"  bindinput="bindKeyInput"  type="text"/>
</view>
<view bindtap="getkeywords">点击通过关键词查找</view>
<view bindtap="getkeywordsbc" >通过关键词补充提示</view>
</view>
<view class="list">
列表
  <view class="item" wx:for="{{list}}" wx:key="index">
  名称：{{item.title}}
  地址：{{item.address}}
  <view class="button" data-item="{{item}}" bindtap="openitem">点击去导航</view>
  </view>
</view>
<confirm isShow="{{showConfirm}}" opt="{{conOpt}}" bindconfirmCb="confirm" bindcancelCb="cancel">
   <view  slot="center" >检测到您没打开获取位置的权限，是否去设置打开</view>
    </confirm>

2、js

// pages/test/test.js
var QQMapWX = require('../../utils/location/qqmap-wx-jssdk');
var qqmapsdk = new QQMapWX({
  key: 'xxxxx'//申请完成的密钥
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    conOpt:{
      // cancelText:'取消'
      showCancel: true,
      showConfirm: true,
      header:'提示',
      confirmColor: '#008FFF',
      cancelColor:'#61646C'
    },
    showConfirm:false,
    inputValue:'',
    list:[]
  },
  confirm(){
    let that=this
    that.setData({
      showConfirm:false
    })
    wx.openSetting({
      success (res) {
        console.log(res.authSetting)
        // res.authSetting = {
        //   "scope.userInfo": true,
        //   "scope.userLocation": true
        // }

      }
    })
  },
  cancel(){
    let that=this
    that.setData({
      showConfirm:false
    })
  },
  openconfirm(){
    let that=this
      wx.getSetting({
      success (res) {
        console.log('success');
        console.log(res.authSetting)
        console.log(res);
        if(res.authSetting){
          console.log(res.authSetting["scope.userLocation"]);
          if(res.authSetting["scope.userLocation"]!=true){
            that.setData({
              showConfirm:true
            })
          }else{
            that.setData({
              showConfirm:false
            })
          }
        }
        // res.authSetting = {
        //   "scope.userInfo": true,
        //   "scope.userLocation": true
        // }
      },fail(res){
        console.log('fail');
        console.log(res);
      }
    })
  },
  //获取定位城市
  getLocation(){
    let that=this
  //       wx.authorize({
  //     scope: 'scope.userLocation',
  //     success: (res) => {
  //         console.log('成功：' , res)
  //     },
  //     fail: (res) => {
  //         console.log('失败：', res)
  //         that.openconfirm()
        
  //     },
  // })
  //   wx.authorize({
  //     scope: 'scope.userLocation',
  //     success: (res) => {
  //         console.log('成功：' , res)
  //     },
  //     fail: (res) => {
  //         console.log('失败：', res)
        
  //     },
  // })
    console.log('获取定位')
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //获取详细地址
            console.log(res)
            var citys = res.result.address_component.city;
            that.setData({
              city:citys
            })
          }
        })
      
      },fail(res){
        console.log(res);
        that.openconfirm()
      }
     })
  }, 
  //获取当前位置打开地图
  openLocation(){
    let that=this
    console.log('打开地图')
    wx.getLocation({
      type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
      success (res) {
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        wx.openLocation({
          latitude,
          longitude,
          // name:res.name,
          // address:res.address,
          // scale: 18
        })
      },fail(res){
        console.log(res);
        that.openconfirm()
      }
     })
   },
   //通过选定位置打开地图
   getopenLocation(){
    wx.chooseLocation({
      success(res){
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        wx.openLocation({
          latitude,
          longitude,
          name:res.name,
          address:res.address,
          scale: 18
        })
      },fail(res){
        console.log(res);
      }
    })
   },
   //固定经纬度打开地图
   fixopenLocation(){
     console.log('1212');
    wx.openLocation({
      latitude:40.003643,
      longitude:116.323044,
      name:"清华大学",
      address:"北京市海淀区双清路30号",
      scale: 18,
      success(res){
        console.log(res);
      },fail(res){
        console.log(res);
      }
    })
   },
   //poi打开地图
   poiLocation(){
    wx.choosePoi({
      success(res) {
        console.log(res, '成功回调')
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        wx.openLocation({
          latitude,
          longitude,
          name:res.name,
          address:res.address,
          scale: 18
        })
      },
      fail(res) {
        console.log(res, '失败回调')
      },
      complete(res) {
        console.log(res, '结束回调')
      }
    })
   },
   //根据地址解析经纬度
   gettextlocation(e){
    // var item = e.currentTarget.dataset.item;
    let item={
      address:'北京市海淀区彩和坊路海淀西大街74号',
      title:'名称'
    }
    qqmapsdk.geocoder({  //根据输入的地址逆解析出经纬度并跳转地图导航
      address:item.address,
      success: res => {
        console.log(res);
        var lat = res.result.location.lat;
        var lng = res.result.location.lng;
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            wx.openLocation({
              latitude: Number(lat),
              longitude: Number(lng),
              name: item.title,
              address: item.addr
            })
          }
        })
   }
   })
  },
  //根据输入搜索位置
  getkeywords(){
    let that=this
    console.log(that.data.inputValue);
    qqmapsdk.search({
      keyword:that.data.inputValue,
      success(res){
        console.log(res);
        that.setData({
          list:res.data
        })
        console.log(that.data.list);
      },fail(res){
        console.log(res);
          that.openconfirm()

      }
    })
  },
  bindKeyInput(e){
    this.setData({
      inputValue: e.detail.value
    })
  },
  openitem(e){
    console.log(e);
    let item=e.currentTarget.dataset.item
    wx.openLocation({
      latitude:Number(item.location.lat),
      longitude:Number(item.location.lng),
      name:item.title,
      address:item.address,
      scale: 18
    })
  },
  //通过关键词补充提示
  getkeywordsbc(){
    qqmapsdk.getSuggestion({
      keyword:'',
      success(res){
        console.log(res);
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // wx.getSetting({
    //   success (res) {
    //     console.log('success');
    //     console.log(res.authSetting)
    //     console.log(res);
    //     if(res.authSetting){
    //       console.log(res.authSetting["scope.userLocation"]);
    //       if(res.authSetting["scope.userLocation"]!=true){
    //         that.setData({
    //           showConfirm:true
    //         })
    //       }else{
    //         that.setData({
    //           showConfirm:false
    //         })
    //       }
    //     }
    //     // res.authSetting = {
    //     //   "scope.userInfo": true,
    //     //   "scope.userLocation": true
    //     // }
    //   },fail(res){
    //     console.log('fail');
    //     console.log(res);
    //   }
    // })
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

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

  },

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

  },

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

  }
})

3、wxss

.testview view{
  margin-top: 30rpx;
}
.iptbox{
  display: flex;
}
.input{
  border: 1px solid gray;
  width: 400rpx;
  margin-left: 20rpx;
  border-radius: 8rpx;
}
.listbox{
  padding: 20rpx 30rpx;
}
.item{
  margin-bottom: 10rpx;
  border-bottom: 1px solid gray;
}
.button{
  background-color: pink;
  width: 300rpx;
  padding: 8rpx 0;
  margin: 10rpx 0;
  text-align: center;
  border-radius: 8rpx;
}

4、json

{
  "usingComponents": {
    "confirm":"../components/confirmBox/confirmBox"
  }
}

5、弹框组件参考博文

微信小程序自定义弹框组件_小任睡不醒`的博客-CSDN博客

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

OpenLoong项目通过技术监督委员会（TOC）评审

开放原子开发者工作坊

开发者谈开源：KWDB开源数据库的未来路径与生态构建实践

开放原子开发者工作坊

开发者谈开源：洞悉协作创新背后的机遇与挑战

近日，在2024开放原子开发者大会暨首届开源技术学术大会开幕式上，开放原子开源基金会与openKylin、EasyAda、KWDB开源项目举行捐赠签约仪式。一场捐赠签约仪式，让三个开源项目及其背后的开发者们受到瞩目。本次，我们与“龘”（EasyAda）核心维护者王伶卓开启了对话。

开放原子开发者工作坊

所有评论(0)

查看更多评论

小任睡不醒`

@m0_55969466

已为社区贡献1条内容