uni-app里面调用鸿蒙原生地图组件会白屏

uni-app里面调用鸿蒙原生地图组件会白屏

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.0.1

手机厂商：华为

手机机型：Mate 60

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

<template>
<embed class="native-map" tag="map" :options='mapOptions' @markertap='onMarkerTap'></embed>  

<!-- <embed class="native-button" tag="button" :options="options" @buttonclick="onClick"></embed> -->

</template>

<script>
import "@/uni_modules/native-harmony-map";
export default {
data() {
return {
options: {
latitude: 39.909,
longitude: 116.39742,
scale: 12,
circles: [
{
latitude: 39.909,
longitude: 116.39743,
color: 0xffff0000,
fillColor: 0xff00ffff,
radius: 80,
strokeWidth: 10,
},
],
markers: [
{
latitude: 39.909,
longitude: 116.39742,
},
{
latitude: 39.9,
longitude: 116.39741,
iconPath: "",
},
],
},
mapOptions: {
center: { latitude: 31.2304, longitude: 121.4737 }, // 上海坐标
zoom: 14,
markers: [{ id: 1, latitude: 31.2304, longitude: 121.4737, title: "陆家嘴" }]
}
// options: {  
//                    label: 'hello'  
//                }  
};
},
methods: {
onMarkerTap(e) {
console.log("onMarkerTap", e);
uni.showToast({
title: "onMarkerTap",
});
},
onClick(e) {
console.log('onClick', e.detail.text)
this.options = {
label: 'world'
}
},
};
</script>

<style scoped>
.native-button {
display: block;
width: 200px;
height: 50px;
margin: 10px auto;
}
</style>

更多关于uni-app里面调用鸿蒙原生地图组件会白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个代码是示例代码，我看没有改动，你提到 button 可以，地图不行。你可以在页面上写几个字符，如果测试文字能看到，地图看不到，参考 https://ext.dcloud.net.cn/plugin?id=23082 开通地图服务，这个不是默认开通的。
如果空白字符串也看不到，打开HBuilderX鸿蒙原生日志或者 deveco 里的日志看下报错原因是什么。

更多关于uni-app里面调用鸿蒙原生地图组件会白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT环境下使用uni-app的embed组件调用鸿蒙原生地图时出现白屏，通常与权限配置或组件初始化有关。以下是关键排查点：

  1. 权限配置缺失
    在manifest.json中确保声明了位置权限：
    "app-plus": {
  "modules": {
    "Maps": {}
  },
  "distribute": {
    "android": {
      "permissions": [
        "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
        "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>"
      ]
    }
  }
}
回到顶部