uniapp,在android平台和ios平台内使用高德地图

文章发布于2020年09月07日 15:09, 归类于: 前端

在app内使用高德地图

步骤:

  1. android平台,生成签名证书,获取证书签名的sha1
  2. 获取高德地图android key (需要用到sha1)、获取ios key

1.Android平台签名证书(.keystore)生成指南

keytool -genkey -alias test -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

生成证别名为test的签名 生成的证书文件名是test.keystore

  • 查看证书的信息 在JRE安装路径的bin目录下运行cmd:
keytool -list -v -keystore youlaoshu.keystore

查看证书的信息

2.获取高德地图key

获取key

获取高德地图ios的key前,先看iOS证书(.p12)和描述文件(.mobileprovision)申请UniApp打包ipa文件,上架iOS App Store 流程指南

PackageName

PackageName是uniapp云打包时自定义设置的android包名。

PackageName

发布版安全码和测试版安全码都填证书的sha1。

把高德地图key添加到manifest.json

uniapp设置高德地图配置manifest.json

3.在nvue使用map组件

新建test.nvue来做地图页面,注意是.nvue格式,不是.vue格式。

<template>
	<view class="mapPage" :style="mapPageStyle">
		<map id="myMap" class="map"  :style="mapStyle" :latitude="latitude" :longitude="longitude" :markers="markers" show-location @callouttap="onCallouttap"></map>
	</view>
</template>

<script>
	
	import {
		$GET,
		$nav
	} from '@/utils/nvueUntils.js'

	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				screenWidth: 375,
				screenHeight: 460
			}
		},
		onLoad() {
			this.getLocation()
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.screenWidth = res.screenWidth
					this.screenHeight = res.screenHeight
				}
			});

		},
		methods: {
			onCallouttap({
				detail: {
					markerId
				}
			}) {
				// 点中的气泡
				console.log('markerId', markerId)
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					complete: res => {
						this.latitude = res.latitude ? res.latitude : this.latitude
						this.longitude = res.longitude ? res.longitude : this.longitude
						this.getList()
					}
				})
			},
			getList() {
				let arr = Array(5).fill('')
				let covers =[]
				arr.forEach((i,k)=>{
					covers.push({
						latitude: this.latitude + (k/300),
						longitude: this.longitude + (k/300),
						id: k + 1,
						callout: {
							fontSize: 18,
							content: ` 气泡${k+1} `,
							borderRadius: 10,
							padding: 6,
							display: 'ALWAYS',
							textAlign: 'center'
						},
					})
				})
				
				this.covers = covers
			}
		},
		computed: {
			// 气泡列表
			markers() {
				if (this.covers) return this.covers
				return []
			},
			mapPageStyle() {
				return `width:${this.screenWidth}px;height:${this.screenHeight}px;`
			},
			mapStyle() {
				return `width:${this.screenWidth}px;height:${this.screenHeight}px;`
			}
		}
	}
</script>

<style>

</style>

nvue高德地图

使用uni.openLocation打开app内的高德地图插件

uni.openLocation({
  latitude: 39.909,
  longitude: 116.39742,
  name:'测试名称',
  address:'测试地址',
  fail() {
    plus.nativeUI.alert("打开地图失败");
  }
});

转载请注明来源:《 uniapp,在android平台和ios平台内使用高德地图》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1599462597.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:uniapp,ios打开apple地图显示自定义地点信息 下一篇:uniapp中使用nvue注意事项