uniapp App端使用高德地图

这篇具有很好参考价值的文章主要介绍了uniapp App端使用高德地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp App端使用高德地图

第一步:

先去高德官网申请keyhttps://console.amap.com/dev/key/app
uniapp App端使用高德地图
关于SHA1生成方法如下:https://lbs.amap.com/faq/android/map-sdk/create-project/43112
我使用的是使用 keytool(jdk自带工具)获取SHA1
PackageName包名和你需要云打包的项目Android包名一样
uniapp App端使用高德地图

第二步:

打开项目manifest.json文件,将所需的权限配置好
uniapp App端使用高德地图
uniapp App端使用高德地图

第三步:

下载微信小程序SDK:https://lbs.amap.com/api/wx/download
然后放进uni项目,在需要用的到页面引入

	import amap from "../../../common/amap-wx.130.js";//微信小程序SDK
	export default {
		data() {
			return {
				key: "高德申请的key",
				amapPlugin: null,
			}
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			this.getAppLocation();
			// #endif
		},
}
methods: {
	//高德地图
	getAppLocation() {
		const _this = this;
		this.amapPlugin = new amap.AMapWX({
			key: this.key //该key 是在高德中申请的微信小程序key
		});
		this.amapPlugin.getRegeo({
			// type: 'gcj02', //map 组件使用的经纬度是国测局坐标, type 为 gcj02
			success: function(res) {
				console.log('app端地图')
				console.log(res);
				_this.getCurLocation();
			},
			fail: (res) => {
				console.log(res);
				//检测app端是否开启权限
				_this.openPosition();
			}
		});
	},
	openPosition() {
		const _this = this;
		let system = uni.getSystemInfoSync()
		if (system.platform === 'android') { //判断平台
			var context = plus.android.importClass("android.content.Context")
			var locationManager = plus.android.importClass("android.location.LocationManager")
			var main = plus.android.runtimeMainActivity()
			var mainSvr = main.getSystemService(context.LOCATION_SERVICE)
			console.log('GPS', mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER))
			if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
				uni.showModal({
					title: '提示',
					content: '请在设置中打开定位服务功能',
					success(res) {
						if (res.confirm) {
							if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
								let main = plus.android.runtimeMainActivity();
								let Intent = plus.android.importClass("android.content.Intent");
								let mIntent = new Intent('android.settings.ACTION_SETTINGS');
								main.startActivity(mIntent); //打开系统设置GPS服务页面 
							} else {
								uni.showToast({
									title: '定位功能已启动',
									duration: 2000
								})
							}
						} else if (res.cancel) {
							// 拒绝授权返回上一页
							_this.goBack();
						}
					}
				})
			} else {
				//获取当前用户所在位置
				_this.getCurLocation();
			}
		}
	},
	getCurLocation() {
		const _this = this;
		uni.getLocation({
			geocode: true,
			type: 'gcj02',
			success: async (res) => {
				console.log(res);
			}
		})
	},
	//搜索地图
	getLcotion() {
		const _this = this;
		uni.chooseLocation({
			success(list) {
				console.log(list);
			}
		})
	},	
}

最后云打包:

Android包名和申请高德key填写的PackageName一致
选择自有证书,如果使用公共测试证书的话,uni.chooseLocation这个方法会搜索不到位置
别名、证书私钥密码、证书文件请查看图二生成的秘钥
uniapp App端使用高德地图
uniapp App端使用高德地图
uniapp App端使用高德地图文章来源地址https://www.toymoban.com/news/detail-451643.html

到了这里,关于uniapp App端使用高德地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 开发安卓App实现高德地图路线规划导航

    描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里。控制在50-100字内。 uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方式。技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的

    2024年02月01日
    浏览(54)
  • Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式

    在 Uniapp 中,可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序,而引入高德地图则有以下两种语法格式供选择: 使用 Vue.js 的语法格式: 使用原生 JavaScript 的语法格式: 需要注意的是,这两种语法格式都需要在页面组件的 JavaScript 文件中引入相应的 API 文

    2024年02月05日
    浏览(58)
  • uniapp小程序使用高德地图步骤

    以下是在uniapp中使用高德地图的步骤: 首先需要在高德地图官网申请一个属于自己的高德地图key。 在uniapp项目中安装高德地图插件,可以使用以下命令进行安装: 在需要使用高德地图的页面中引入高德地图插件      4.在页面中使用高德地图插件:    其中,key为你在高德

    2024年02月02日
    浏览(33)
  • uniapp开发微信小程序使用高德地图

    uniapp  官方文档 地图组件控制  地图组件 高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件 下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入 页面引入并使用

    2024年02月15日
    浏览(100)
  • 【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用

    因为公司的业务需求,需要实现一个接入高德地图的数据大屏,并根据坐标实现地图标点渲染,自定义信息窗体,点击定位等功能。查阅高德地图官方文档时发现使用的是原生 JavaScript ,且网上 uniapp 接入使用的教程较少,我自己摸索之后解决了不少问题,欢迎大佬补充纠正

    2024年02月11日
    浏览(46)
  • uni-app 小程序使用什么地图好(百度,高德,腾讯)

    前言 在开发小程序的时候我们会发现经常需要地图的使用,但是市面上主流的地图有腾讯,高德,百度。哪个好了 其实在我看来这个3地图没有好坏之分,各有所长。只是说哪个地图写小程序更加轻便,更加低耦合。 后面我把他们都试了一下发现,他们的使用方式都差不多,

    2024年02月09日
    浏览(90)
  • uniapp使用高德地图地理位置逆解析/将获取到的经纬度转化为地址

    1、在高德登录注册,进行个人或企业开发者认证(个人开发者可以随时升级企业开发者) 高德地图开发aip网址 2、进入控制台,按以下图示操作 添加完成之后把key复制一下。 3、使用uni.request进行请求(用什么框架就这么请求,这里示例的是uniapp),请求地址为:https://rest

    2024年02月08日
    浏览(52)
  • UniApp 制作高德地图插件

    1、下载Uni插件项目 在Uni官网下载Uni插件项目,并参考官网插件项目创建插件项目. 开发者须知 | uni小程序SDK 如果下载下来项目运行不了可以参考下面链接进行处理 UniApp原生插件制作_wangdaoyin2010的博客-CSDN博客 2、引入高德SDK 2.1 在高德官网下载对应SDK 相关下载-Android 地图SD

    2024年02月12日
    浏览(91)
  • uniapp h5获取用户地理位置信息(高德地图)

     使用uni.getLocation()先获取到当前位置信息的经纬度 H5端测试可以使用http,上线打包需要设置为https模式 谷歌浏览器可能会获取不到任何信息,因为谷歌浏览器位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败 使用高德开发平台注册一个key 高德开发平台:高

    2024年02月13日
    浏览(45)
  • Flutter - APP跳转高德、百度、腾讯、谷歌地图

    demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新,请前往github查看最新代码 这里介绍的是不需要自己开发地图,直接通过给定的经纬度,跳转到三方地图APP调用导航的方式 一种是写的工具类,一种是通过调用三方库 map_launcher 实现的 官方文档: 跳转高德导航 - 路径

    2024年01月20日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包