uni-app <map>组件中markers标记在app中不显示

uni-app <map>组件中markers标记在app中不显示

产品分类

uniapp/App

PC开发环境

  • 操作系统：Windows
  • 版本号：3.1.13

HBuilderX

  • 类型：正式
  • 版本号：3.1.13

手机系统

  • 类型：Android
  • 版本号：Android 10
  • 厂商：vivo
  • 机型：V1914A

页面类型

nvue

打包方式

云端

项目创建方式

HBuilderX

示例代码

<template>  
    <view class="content">  
        <map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" :latitude="location.latitude"  
            :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass"  
            :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll"  
            :enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :markers="markers"  
            :polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"></map>  
        <view class="line"></view>  
        <uni-list class="scrollview">  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enable3D" title="显示3D楼块" @switchChange="enableThreeD" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="showCompass" title="显示指南针" @switchChange="changeShowCompass" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableOverlooking" title="开启俯视" @switchChange="changeEnableOverlooking" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableZoom" title="是否支持缩放" @switchChange="changeEnableZoom" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableScroll" title="是否支持拖动" @switchChange="changeEnableScroll" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableRotate" title="是否支持旋转" @switchChange="changeEnableRotate" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableSatellite" title="是否开启卫星图" @switchChange="changeEnableSatellite" />  
            <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableTraffic" title="是否开启实时路况" @switchChange="changeEnableTraffic" />  
        </uni-list>  
    </view>  
</template>

操作步骤

  • <map>组件中markers标记在app中不显示

预期结果

  • <map>组件中markers标记显示

实际结果

  • <map>组件中markers标记不显示

bug描述

  • <map>组件中markers标记在app中不显示

更多关于uni-app <map>组件中markers标记在app中不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也蹲一下，第一次用uniapp，只有map标签用的一个nvue文件，其它是vue文件，但是map设置的相关的配置在浏览器打开的都是显示的，可是到了手机端只有图片，字显示，设置的颜色背景啥的都不显示，搞不懂啊

更多关于uni-app <map>组件中markers标记在app中不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中使用<map>组件时，markers不显示通常涉及几个关键问题：

  1. nvue页面特性：nvue页面与vue页面渲染机制不同，map组件在nvue中需要确保样式设置正确。检查map是否设置了明确的宽高样式，例如：
.map {
  width: 750rpx;
  height: 300px;
}
  1. markers数据格式：确认markers数组格式正确，必须包含有效的经纬度坐标。示例：
markers: [{
  id: 1,
  latitude: 39.909,
  longitude: 116.39742,
  title: '北京市'
}]
  1. 定位权限：Android应用需要获取位置权限。在manifest.json中配置：
"permissions": {
  "MAP": {},
  "LOCATION": {}
}
回到顶部