uni-app 地图显示出错

uni-app 地图显示出错

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 2009 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.0.7

手机系统：全部

手机厂商：华为

页面类型：vue

vue版本：vue2

打包方式：云端

测试过的手机：originOS ocean x30 Pro 版本PD1938B_A_9.3.23

示例代码：

<view style="height: 1200rpx;background-color: #FF5A5F;"></view>  
<view style="height: 1200rpx;background-color: #F0AD4E;" v-if="show"></view>  
<button [@click](/user/click)="show= !show">点击</button>  
<button [@click](/user/click)="latitude='25.578319',longitude='111.944409'">修改定位</button>  
<map id="map" :latitude="latitude" :longitude="longitude" style="width:200px;height:120px"></map>

更多关于uni-app 地图显示出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 地图显示出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于uni-app地图显示问题，以下是可能的原因和解决方案：

  1. 基础配置问题：
  • 确保manifest.json中已正确配置地图权限：
"app-plus": {
    "maps": {
        "qqmap": {
            "appkey": "你的腾讯地图key"
        }
    }
}
  1. 常见显示异常情况：
  • 地图容器尺寸问题：建议使用固定像素值而非rpx单位
  • 定位坐标格式：确保传入的latitude/longitude是Number类型
  • 层级问题：地图组件可能被其他元素遮挡
  1. 针对示例代码的具体问题：
// 建议修改为：
<map 
  id="map" 
  :latitude="Number(latitude)" 
  :longitude="Number(longitude)"
  style="width:750rpx;height:300rpx">
</map>

// data中应明确定义初始值
data() {
  return {
    latitude: 39.908823,
    longitude: 116.397470,
    show: false
  }
}
回到顶部