uni-app nvue页面下map组件百度地图不显示

uni-app nvue页面下map组件百度地图不显示

开发环境 版本号 项目创建方式
Windows 64位操作系统 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：Android

手机系统版本号：Android 11

手机厂商：模拟器

手机机型：mate50pro

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

``` html
<!-- nvue 页面 -->  
<template>  
<view>  
<!-- map组件必须设置宽高 -->  
<map   
class="map"   
longitude="longitude"
latitude="latitude"
scale="scale"
markers="markers"
>
</map>
</view>
</template>  

<script>
export default {
data() {
return {
longitude: 116.397128, // 百度地图坐标（北京）
latitude: 39.916527,
scale: 16,
markers: [{
id: 0,
longitude: 116.397128,
latitude: 39.916527,
title: "百度地图示例"
}]
}
}
}
</script>  

<style>
.map {
width: 500px;
height:500px; /* 必须设置高度，否则不显示 */
}
</style>

操作步骤： nvue页面下map百度地图不显示

预期结果： 显示地图

实际结果： 未显示地图

bug描述： nvue页面下map百度地图不显示


更多关于uni-app nvue页面下map组件百度地图不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue页面不支持百度地图。

更多关于uni-app nvue页面下map组件百度地图不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于nvue页面下百度地图不显示的问题，以下是可能的原因和解决方案：

  1. 检查百度地图SDK配置：
  • 确保manifest.json中已正确配置百度地图Android/iOS的AppKey
  • 云端打包需要勾选百度地图模块
  1. nvue页面特殊处理：
  • nvue页面需要显式声明map组件的宽高，建议使用750rpx单位
  • 检查style是否使用了scoped，可能导致样式不生效
  1. 常见解决方法：
<map 
  style="width:750rpx;height:500rpx"
  :longitude="longitude"
  :latitude="latitude"
  :scale="scale"
  :markers="markers"
></map>
回到顶部