文章目录

需求场景:使用uni-app地图组件,实现APP开发
开发环境:Mac,HbuildX3.4.14
测试环境:iOS真机调试

一、流程

  • 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。

  • 2、创建高德地图应用,获取APP_Key:(APP需要单独配置iOS和Android应用key)

  • 3、项目配置

    • APP模块配置:manifest.json文件 --> APP模块配置 --> Map(地图,只能选一个) --> 勾中高德地图, 配置appkey_iosappkey_android
    • APP权限配置:manifest.json文件 --> App权限配置 分别配置Android和iOS权限。iOS提供相关提示文案。

权限

模块配置

  • 4、运行
    • 配置完成之后,重新创建APP基座,删除设备上已存在的安装包(之前已安装),重新运行。

// location-setting-map.nvue

<template>
	<view class="view-container">
		<view class="view-map-contaier">
			<map id="map" style="width: 750rpx; height: 500px;background-color: #ff0000;" :latitude="latitude" :longitude="longitude">
				
			</map>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:40.013305,
				longitude:118.685713,
			}
		},
		onLoad() {
			
		},
		
		onReady() {
			
			this.createMap()
		},
		
		methods: {
			createMap() {

			}
		}
	}
</script>

<style>
	.view-container {
		
	}
	.view-map-contaier {
		width: 750rpx;
		height: 500px;
		background-color: aqua;
	}
	.view-map-item {
		
	}
</style>

二、问题

  • 1、地图Map组件空白,不报错

地图组件加载,但是没有地图内容。因为bundleID和高德配置的不一致导致的。另外配置默认经纬度,否则显示也会有一点问题。

  • 2、“HTML5+Runtime” – 打包时未添加Maps模块,请参考https://ask.dcloud.net.cn/article/283

在问题1解决之后,出现了问题2。提示给出的文章链接,文章并没有解决问题,或者说遇到的问题不大相同。文章中说的模块之前都已经配置,相关的key也排查过没有问题。

最终解决方法是:删除设备上的安装包,重新打包运行基座。

具体原因还有待确认:

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐