三分钟学会微信小程序地图定位-Toy模板网

这篇具有很好参考价值的文章主要介绍了三分钟学会微信小程序地图定位。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

地理定位-wx.getLocation

掌握小程序中的定位api:getLocation和chooseLocation
分析:
用户进入这个页面时，就要获取当前位置。这个功能有现成的api。
getLocation
获取用户所在位置的经纬度。在小程序中调用这个接口时必须先在 app.json 中申请调用权限（开发环境可以省略）。

app.json

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

微信小程序地图,微信小程序,小程序

这个弹层会出现一次，点击允许之后就不会在出现。

业务代码

Page({
  onLoad() {
    this.getLocation()
  },
  async getLocation() {
    const res = await wx.getLocation() // 要提前申请权限
    console.log(res)
  },
})

wx.getLocation返回的结果格式大致如下：

accuracy: 65
errMsg: "getLocation:ok"
horizontalAccuracy: 65
latitude: 30.88131
longitude: 114.37509
speed: -1
verticalAccuracy: 65

腾讯位置服务—逆地址解析 QQMap.reverseGeocoder

思考

wx.getLocation 只能得到经纬度信息，如何根据经纬度获取到所在地的名称呢？

微信小程序地图,微信小程序,小程序

逆地址解析-reverseGeocoder
本接口提供由坐标 → 坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表
文档地址：微信小程序JavaScript SDK | 腾讯位置服务
步骤
1导入 QQMapWX 并设置好 key

微信小程序地图,微信小程序,小程序

2 业务代码
在代码中补充getPoint方法：
1调用接口把经纬度转换成对应位置的文字
2保存文字到address

// 

// 导入位置服务实例
import QQMap from '../../../utils/qqmap'

Page({
  onLoad() {
    // 获取用户经纬度
    this.getLocation()
  },

  // 获取用户的位置
  async getLocation() {
    // 调用小和序 API 获取用户位置
    const { latitude, longitude } = await wx.getLocation()
    this.getPoint(latitude, longitude)

    console.log('终点位置:', latitude, longitude)
  },

  getPoint(latitude, longitude) {
    // 逆地址解析（根据经纬度来获取地址）
    QQMap.reverseGeocoder({
      location: [latitude, longitude].join(','),
      success: ({ result: { address } }) => {
        // console.log(address)
        // 数据数据
        this.setData({ address })
      },
    })
  }
})

3渲染页面

 <van-cell-group border="{{false}}" title="当前地点">
  <van-cell title="{{address}}" border="{{false}}">
    <text bind:tap="chooseLocation" class="enjoy-icon icon-locate">重新定位</text>
  </van-cell>
</van-cell-group>

微信小程序地图,微信小程序,小程序

QQMap地点搜索—search

微信小程序地图,微信小程序,小程序

根据当前的定位，调用 QQMap.search() 找到周边的信息。
QQMap.search
搜索周边poi(Point of Interest)，比如：“酒店” “餐饮” “娱乐” “学校” 等等文档地址：微信小程序JavaScript SDK | 腾讯位置服务

调用了QQMap.search

// house_pkg/pages/locate/index.ts

// 导入位置服务实例
import QQMap from '../../../utils/qqmap'

Page({
  onLoad() {
    // 获取用户经纬度
    this.getLocation()
  },

  // 获取用户的位置
  async getLocation() {
    // 调用小和序 API 获取用户位置
    const { latitude, longitude } = await wx.getLocation()
    // 
    this.getPoint(latitude, longitude)

    console.log('终点位置:', latitude, longitude)
  },

  getPoint(latitude, longitude) {
    // 省略其他....
    
    QQMap.search({
      keyword: '住宅小区', //搜索关键词
      location: [latitude, longitude].join(','), //设置周边搜索中心点
      page_size: 5,
      success: (result) => {
        console.log(result)
        // 过滤掉多余的数据
        const points = result.data.map(({ id, title, _distance }) => {
          return { id, title, _distance }
        })

        // console.log(points)
        // 渲染数据
        this.setData({ points })
      }
    })
  },
})

视图渲染

<van-cell-group border="{{false}}" title="附近社区">
  <van-cell
    wx:for="{{points}}"
    wx:key="id"
    title="{{item.title}}"
    link-type="navigateTo"
    url="/house_pkg/pages/building/index?point={{item.title}}"
    is-link
  />
</van-cell-group>

重新定位-wx.chooseLocation 效果

微信小程序地图,微信小程序,小程序

api 会自动打开地图
申请权限
chooseLocation
获取用户指定位置的经纬度。在小程序中调用这个接口时必须要在 app.json 中申请调用权限
参考代码文章来源地址https://www.toymoban.com/news/detail-729791.html

{
  "requiredPrivateInfos": [
    "chooseLocation"
  ]
}

参考代码

// 选择新的位置
async chooseLocation() {
  // 调用小程序 API 获取新的位置
  const { latitude, longitude } = await wx.chooseLocation()
  // 获取新的位置附近的小区
  this.getPoint(latitude, longitude)

  console.log('起点位置:', latitude, longitude)
},

getPoint(latitude, longitude) {
  // 显示loading提示
  wx.showLoading({
    title: '正在加载...',
  })

  // 逆地址解析（根据经纬度来获取地址）
  QQMap.reverseGeocoder({
    location: [latitude, longitude].join(','),
    success: ({ result: { address } }) => {
      // console.log(address)
      // 数据数据
      this.setData({ address })
    },
  })

  QQMap.search({
    keyword: '住宅小区', //搜索关键词
    location: [latitude, longitude].join(','), //设置周边搜索中心点
    page_size: 5,
    success: (result) => {
      // console.log(result)
      // 过滤掉多余的数据
      const points = result.data.map(({ id, title, _distance }) => {
        return { id, title, _distance }
      })

      // console.log(points)
      // 渲染数据
      this.setData({ points })
    },
    fail: (err) => {
      console.log(err.message)
    },
    complete: () => {
      // 隐藏loading提示
      wx.hideLoading()
    },
  })
},

模板

<view class="locate">
  <van-cell-group border="{{false}}" title="当前地点">
    <van-cell title="{{address}}" border="{{false}}">
      <text bindtap="chooseLocation" class="enjoy-icon icon-locate">重新定位</text>
    </van-cell>
  </van-cell-group>

到了这里，关于三分钟学会微信小程序地图定位的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！