需求场景：使用uni-app地图组件，实现APP开发
开发环境：Mac，HbuildX3.4.14
测试环境：iOS真机调试
一、流程
-
1、关于Uini-app的map组件：官方文档说明。map组件是原生组件，目前只针对原生APP开发，因此通过app-nvue实现，同时选择的地图服务商只能是高德地图。
-
2、创建高德地图应用，获取APP_Key：(APP需要单独配置iOS和Android应用key)
- 高德-iOS配置教程
- 高德-Android配置教程
- 注：申请APP_Key的Android的包名和iOS的BundleID和证书信息及项目基本配置一致。否则会出问题。地图空白或者报错时优先排查配置。
-
3、项目配置
- APP模块配置：
manifest.json文件-->APP模块配置-->Map(地图，只能选一个)--> 勾中高德地图， 配置appkey_ios与appkey_android - APP权限配置：
manifest.json文件-->App权限配置分别配置Android和iOS权限。iOS提供相关提示文案。
- APP模块配置：
- 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也排查过没有问题。
最终解决方法是：删除设备上的安装包，重新打包运行基座。文章来源：https://www.toymoban.com/news/detail-610649.html
具体原因还有待确认：文章来源地址https://www.toymoban.com/news/detail-610649.html
到了这里，关于uni-app引入地图map组件--APP开发的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
