APP端定位实现(uniapp Vue3)(腾讯地图)

一.申请腾讯地图开发者

官网腾讯位置服务 - 立足生态,连接未来

注册的话可以选择个人和企业,推荐先注册个人,企业的话如果后期有需要到时候个人可以升级为企业

申请完成之后点击控制台进入当前页面后点击应用管理 ------ 我的应用

点击创建应用

应用名称随便填(自己知道哪个是哪个就行),应用类型的话,自己要调用这个定位接口的app是什么类型就选什么类型

申请key成功之后会看到如上信息

二.uniapp项目配置(安卓)

下面是文件的内容

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 
  package="io.dcloud.nativeresouce">
    <!--permissions-->
	<!-- 定位权限 -->
	    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
	    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
	    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
	    <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/>
    <application>
        <!--meta-data-->
        <meta-data android:name="TencentMapSDK" android:value="你申请的腾讯地图的key"/>

    </application>
</manifest>

三.uniapp项目配置(苹果IOS)

内容如下

XML 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>TencentLBSAPIKey</key>
		<string>你申请的腾讯地图key</string>

		<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
		<string>允许使用定位权限吗</string>
		<key>NSLocationWhenInUseUsageDescription</key>
		<string>允许仅在app运行期间使用定位权限</string>
		<key>NSLocationTemporaryUsageDescriptionDictionary</key>
		<dict>
			<key>PurposeKey</key>
			<string>这里需要您临时授权高精度定位权限,一次临时授权时效仅app一个周期内, 每次硬启动都需要临时授权</string>
		</dict>

  	<key>UIBackgroundModes</key>
		<array>
			<string>location</string>
		</array>

	</dict>
</plist>

四.使用uni.getLocation进行定位获取

官方文档uni.getLocation(OBJECT) | uni-app官网

使用

javascript 复制代码
uni.getLocation({
				provider: 'tencent',
				type: 'gcj02',
				isHighAccuracy: true,
				geocode: true,
				success: (res) => {
					state.longitude = res.longitude
					state.latitude = res.latitude
					state.address = res.address
					console.log(res, '调用成功')
				},
				fail: (err) => {
					console.log(err, '调用失败')
				}
			})
相关推荐
sunjay1172 小时前
uniapp 通用地磅称重系统手机端
uni-app
meng半颗糖4 小时前
uniapp基础(五)调试与错误
前端·uni-app·uniapp 常见错误
瑶琴AI前端1 天前
HBuilderX uniapp项目转vue-cli项目完整步骤(已成功)
前端·vue.js·uni-app
苏州第一深情1 天前
【uniapp】uniapp实现单点登录、打包H5部署到线上
javascript·vue.js·uni-app
anyup1 天前
uView Pro 正式开源!70+ Vue3 组件重构全记录,助力 uni-app 组件生态,你会选择吗?
前端·架构·uni-app
阿奇__1 天前
uniapp 类似popover气泡下拉框组件
前端·css·uni-app
泡壶好茶1 天前
uniapp Android App集成支付宝的扫码组件mPaaS
uni-app·扫码组件mpaas
绍棠1 天前
uniapp转app时,cover-view的坑
前端·javascript·uni-app
QZ_orz_freedom1 天前
uni-app学习笔记01-项目初始化及相关文件
笔记·学习·uni-app
游戏开发爱好者81 天前
Fiddler中文版使用指南 提升开发流程的一站式抓包与调试体验
android·ios·小程序·https·uni-app·iphone·webview