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, '调用失败')
				}
			})
相关推荐
vayy9 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
叫我阿柒啊11 小时前
Java全栈开发工程师的面试实战:从基础到微服务
java·数据库·spring boot·微服务·node.js·vue3·全栈开发
阿里云云原生14 小时前
从体验到系统工程丨上手评测国内首款 AI 电商 App
app
FAIRY_STARS15 小时前
记录uni-app好用的select组件
uni-app
FAIRY_STARS15 小时前
关于uni-app pages.json配置详解
uni-app
FliPPeDround16 小时前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
iOS阿玮17 小时前
苹果审核被拒4.8.0条款,快速过审通关指南。
uni-app·app·apple
Ratten21 小时前
uniapp的H5 在 UC 浏览器中返回上一页失效的解决方案
uni-app
Ratten21 小时前
uniapp 的 H5和微信小程序上传 base64 图片
uni-app
Ratten21 小时前
使用 uniapp 扩展组件 uni-file-picker 实现视频和图片都可以预览展示
uni-app