【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

这篇具有很好参考价值的文章主要介绍了【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

我的项目是uniapp打包成安卓app,这里不会讲解微信小程序之类的踩坑,只记录app端的用法

首先要知道,定位是返回经纬度,地图是渲染页面。这个不能搞混。
在uniapp中有map组件,具体可看官网的文档map的使用直通车
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

wgs84是GPS的经纬度坐标,gcj02是国测局的经纬度,我们使用的是高德地图,所以使用国测局。

谷歌地图使用 wgs84 坐标,其他地图使用 gcj02 坐标,用错坐标类型会显示偏移。


提示:以下是本篇文章正文内容,下面案例可供参考

一、创建你的uniapp

使用HbuilderX一键创建,这个不多说。进入主题

1.打开Dcloud开发者后台

传送门
用你的账号密码登录,看你的应用列表
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

2.下载你的证书、获取你的SHA1安全码、证书私钥密码

点击蓝色标题名字进去查看详情
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
点击下载证书会有一个弹框,有的没有会直接下载。去文件管理里面照我说的做。
证书是最后面用来打包生成app的


然后点开你的证书详情,不是你下载的文件,是下载证书旁边的按钮
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

这里是你的证书别名和SHA1安全编码,还有个按钮是私钥密码

这两个东西,证书别名是用来打包的
SHA1是用来给高德地图的
还有个证书私钥密码,也是用来打包的

记住这三个东西的位置,或者复制下来保存text在项目中

二、打开高德开放平台申请key

1.打开官网

高德地图开发者平台直通车
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
登录你的账号,推荐手机号注册,然后再用手机号去关联QQ+微信。

2.创建一个应用

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

登录进入后台之后,点击应用管理=》我的应用=》创建新应用

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、


创建应用好了之后,点击右边的添加。为你的应用添加一个key
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
这里添加只能选安卓,如果你要打包成苹果,你再添加一个key就好了。uniapp是区分了苹果和安卓的key的。不会冲突

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
添加成功之后,会有一个key值,复制它

三、在uniapp中修改参数

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
这里有定位和地图两个。两个都需要填入key

四、在地图中使用

html

<view class="mapcell">
	<map :latitude="latitude"  
	:longitude="longitude" 
	scale="18"  
	:markers="markers" 
	:show-location="true" 
	:controls="controls" 
	@controltap="refresh" >
	</map>
</view>

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
属性都在官网里面有,看着来用,这里不做多解释。
css

.mapcell{
	width 100%
	height 440rpx
	margin-bottom 30rpx
	padding 0  24rpx
	map{
		width:100%;
		height:100%;
	}
}

js
放在methods里面

// 获取定位
getlocation(){
	var that =this
	uni.getLocation({
		type: 'gcj02',//国测局
		geocode: 'true',
		success: function (res) {
			console.log('当前位置的经度:' + res.longitude);
			console.log('当前位置的纬度:' + res.latitude);
			console.log('当前位置:' + JSON.stringify(res));
			  
			// 创建地图坐标对象
			var point = new plus.maps.Point(res.longitude, res.latitude);
			//静态方法,反向地理编码
			plus.maps.Map.reverseGeocode(point, {},(event)=>{
				var address = event.address; // 转换后的地理位置
				that.locationaddress=address // 重新赋值
			},function(e) {
				console.log("失败回调",e);
			});
			// 赋值经纬度,从而得到当前位置
			that.latitude=res.latitude
			that.longitude=res.longitude 

			// 地图上显示所在图标开始
			let arr =[{
				id:0,
				longitude:res.longitude,
				latitude:res.latitude,
				name:"所在位置"
			}]
			let markers = []
			for (var i=0;i<arr.length;i++){
				markers=markers.concat({
				id:arr[i].id,
				latitude: arr[i].latitude,//纬度
				longitude: arr[i].longitude,//经度
				callout:{//自定义标记点上方的气泡窗口 点击有效
					content:arr[i].name,//文本
					color:'#ffffff',//文字颜色
					fontSize:18,//文本大小
					borderRadius:8,//边框圆角
					bgColor:'#00c16f',//背景颜色
					display:'ALWAYS',//常显
				},
				iconPath:'../../../static/loca.png',
				width:24,
				height:24
			})
		}
		that.markers=markers; // markers就是地图选点一样的功能,显示小坐标
		// 地图上显示所在图标结束
		that.controls=[{
			id:0,
			position:{//控件在地图的位置
				left:15,
				top:15,
				width:24,
				height:24
			},
			iconPath:'../../../static/refresh_map.png'
		}]
	},
	// 定位失败
	fail: function (err) {
		uni.showToast({
			title: err,
			icon:'none'
			});
		}
	})
},
// 点击刷新方法
refresh(e){
	this.getlocation();
},

变量请在data中定义,locationaddress这个是详细地址,看效果图

longitude 中心经度
latitude 纬度
scale 缩放级别
markers 地图显示小坐标
show-location 显示带有方向的当前定位点

这两个就是刷新定位
controls 显示控件
@controltap 点击控件方法

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
这个方法是用来获取详细地址的↑


五、效果图

【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、
效果如图

六、打包生成app

发行=》点击第一个【原生app云打包】
【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

总结

如果打包之后定位失效,思考一下几个问题
SHA1是否一致,检查高德地图和Dcloud里面的信息
包名是否一致,打包的时候需要输入包名,要一致

证书使用自有证书,因为高德地图的SHA1编码就是那个证书里面的。公共测试证书没有那个编码,所以也不会起作用。如果定位有偏差检查一下是不是国测局文章来源地址https://www.toymoban.com/news/detail-415482.html

到了这里,关于【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp上高德(百度)地图API的使用(APP安卓)

    前言 由于在app中没有document,window等对象,所以使用在pc端传统方法引入的方式,将会发现无法引用成功,会出现白屏现象。 目前有两种解决方式: 使用uniapp的web-view方式(百度地图) 使用renderjs来调用document等js对象(高德地图) map.vue: 中间实时显示地图上图标的个数,以及

    2023年04月10日
    浏览(87)
  • uniapp app端使用谷歌地图选点定位

    国内需要vpn 和申请谷歌地图的Maps JavaScript API 类型的 key,指引链接这里不详细介绍 一 、我们得通过webview 跳转谷歌地图 ,需要创建一个webview页面,里面跳转承载谷歌地图的html页面,如果是放在本地的话 html文件须遵守规范 放在 “项目根目录下-hybrid-html-google-map.html” 或static目录

    2024年02月07日
    浏览(33)
  • 手机上获取地图某个定位的经纬度坐标的方法 - 查询经度、纬度 - 百度地图app、高德地图app、Earth地球

    拖动、定位、获得左上角的 东经、北纬等信息,就是经度、纬度了。 手机安装app 苹果: Earth-地球 安卓、鸿蒙: Earth地球   打开软件,拖动地图   左上角的坐标就是 经度、纬度     百度地图app、高德地图app都无法获取坐标、经度、纬度   手机也可以用 网页版坐标拾取系

    2024年02月09日
    浏览(170)
  • uniapp 开发安卓App实现高德地图路线规划导航

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

    2024年02月01日
    浏览(48)
  • uni-app离线打包高德地图导入android studio不能正常显示

    本人使用的uni-app SDK版本:Android-SDK@3.8.7.81902_20230704 1.导入以上文件,依赖已经自动添加了 2.确保这个正常引入 3.修改AndroidMainifest.xml,添加自己的密钥

    2024年02月13日
    浏览(55)
  • 微信小程序使用高德地图获取当前定位

    1.在腾讯地图官网注册一个key(创建一个应用会自动生成一个key,详细步骤如图) 腾讯位置服务 - 立足生态,连接未来 注意点:开通webserviceAPI服务:控制台 -应用管理 - 我的应用 -添加key- 勾选WebServiceAPI - 保存 (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需

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

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

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

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

    2024年02月02日
    浏览(32)
  • 微信小程序使用高德地图实现检索定位附近周边的POI功能示例

           解压下载的文件得到 amap-wx.js ,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下。 登录微信公众平台,在 \\\"设置\\\" → \\\"开发设置\\\" 中设置 request 合法域名,将  https://restapi.amap.com  中添加进去,如下图所示:    

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

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

    2024年02月15日
    浏览(96)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包