巧用腾讯位置服务，让你的uni-app如虎添翼

一、初识uni-app

uni-app是一个使用Vue.js开发跨平台应用的框架，它允许您使用一套代码开发iOS、Android、H5和微信小程序。uni-app的定位服务基于腾讯位置服务，它提供了一系列强大的定位功能，包括：

• 实时定位：获取设备当前位置，并持续更新位置信息。
• 周边搜索：搜索设备附近的兴趣点，如餐厅、商店、景点等。
• 路线规划：提供从起点到终点的路线规划，并显示路线上的距离和时间。
• 地理编码：将地址转换为经纬度坐标。
• 逆地理编码：将经纬度坐标转换为地址。

二、集成腾讯位置服务

1. 创建腾讯位置服务账号

前往腾讯位置服务官网（https://lbs.qq.com/）注册账号并创建项目。

2. 启用相关服务

在腾讯位置服务控制台，启用定位服务、周边搜索服务、路线规划服务、地理编码服务和逆地理编码服务。

3. 获取API Key

在腾讯位置服务控制台，获取项目的API Key。

4. 在uni-app项目中集成腾讯位置服务

在uni-app项目中，安装腾讯位置服务插件：

npm install @tencent/tencent-lbs-uni

然后在main.js文件中引入腾讯位置服务插件：

import TencentLbs from '@tencent/tencent-lbs-uni'

Vue.use(TencentLbs, {
  key: 'YOUR_API_KEY'
})

三、使用腾讯位置服务

1. 定位

uni.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log(res)
  }
})

2. 周边搜索

uni.getPoi({
  keyword: '餐厅',
  success: (res) => {
    console.log(res)
  }
})

3. 路线规划

uni.getRoutePlan({
  origin: {
    latitude: 39.989844,
    longitude: 116.481288
  },
  destination: {
    latitude: 39.908844,
    longitude: 116.397392
  },
  success: (res) => {
    console.log(res)
  }
})

4. 地理编码

uni.geocoder({
  address: '北京市海淀区中关村大街1号',
  success: (res) => {
    console.log(res)
  }
})

5. 逆地理编码

uni.reverseGeocoder({
  latitude: 39.989844,
  longitude: 116.481288,
  success: (res) => {
    console.log(res)
  }
})

四、注意事项

1. 微信小程序端需勾选WebServiceAPI

在微信小程序端，需要在项目设置中勾选WebServiceAPI。

2. manifest.json文件中需要添加相关配置

在uni-app项目的manifest.json文件中，需要添加以下配置：

{
  "networkTimeout": {
    "request": 10000,
    "download": 10000
  },
  "permission": {
    "scope.userLocation": {
      "description": "你的位置信息将用于小程序位置功能"
    }
  }
}

3. iOS端需要在Info.plist文件中添加相关配置

在iOS端的Info.plist文件中，需要添加以下配置：

<key>NSLocationWhenInUseUsageDescription</key>
<string>你的位置信息将用于小程序位置功能</string>

结语

uni-app与腾讯位置服务的强强联合，让您的应用定位如虎添翼，轻松实现定位功能，助力您的应用更上一层楼。