uni-app vue使用map组件自定义iconPath在安卓机无法显示

uni-app vue使用map组件自定义iconPath在安卓机无法显示

产品分类:

uniapp/App

PC开发环境操作系统:

Mac

PC开发环境操作系统版本号:

macOS Big Sur 11.4

HBuilderX类型:

正式

HBuilderX版本号:

3.1.18

手机系统:

Android

手机系统版本号:

Android 11

手机厂商:

小米

手机机型:

小米10

页面类型:

vue

打包方式:

云端

项目创建方式:

HBuilderX

示例代码:

<template>  
    <view>  
        <map class="map" :scale="14" :latitude="centerPoint.latitude"   
            :longitude="centerPoint.longitude" :markers="markers"></map>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                markers: [{  
                    latitude: 39.909,  
                    longitude: 116.39742,  
                    iconPath:"/static/dingwei.png",  
                    width:175,  
                    height:75  

                }, {  
                    latitude: 39.90,  
                    longitude: 116.39,  
                    iconPath:'../../static/dingwei.png',  
                    width:75,  
                    height:75  
                }, {  
                    latitude: 39.891,  
                    longitude: 116.39333,  
                    iconPath:"/static/dingwei.png",  
                    width:75,  
                    height:75  
                }],  
                centerPoint: {  
                    latitude: 39.909,  
                    longitude: 116.39742  
                }  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .map{  
        width: 100%;   
        height: calc(100vh - var(--window-top));  
    }  
</style>

操作步骤:

  • 根据代码复现

预期结果:

  • app中可显示自定义iconPath图片

实际结果:

  • app中自定义iconPath图片无效

bug描述:

如题,map组件自定义iconPath在安卓机无法显示,只显示默认蓝色图标,width和height也无效,微信小程序都显示正常。

Image Image


更多关于uni-app vue使用map组件自定义iconPath在安卓机无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

收到 问题会排查一下。地图组件优先使用nvue

更多关于uni-app vue使用map组件自定义iconPath在安卓机无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


嗯嗯,使用了nvue没问题,但是vue要么一致,要么直接砍掉,map组件就不要保留vue了

已经使用nvue还有同样的问题,是什么原因,你路径写对绝对路径还是相对路径

现在使用iconPath宽高还是无效,还有label也是,只显示文字

这是一个常见的路径问题。在uni-app的App端,map组件的iconPath需要使用绝对路径或base64格式。

问题分析:

  1. 在App端,相对路径(如../../static/)和以/static/开头的路径可能无法正确解析
  2. 微信小程序能正常显示是因为小程序的路径解析机制与App端不同

解决方案:

方案一:使用绝对路径(推荐)

// 在data中或methods中定义
markers: [{
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: plus.io.convertLocalFileSystemURL('/static/dingwei.png'),
    width: 75,
    height: 75
}]

方案二:使用base64格式

// 将图片转换为base64编码
markers: [{
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...',
    width: 75,
    height: 75
}]

方案三:使用网络图片

markers: [{
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: 'https://example.com/dingwei.png',
    width: 75,
    height: 75
}]

方案四:使用条件编译处理路径差异

// #ifdef APP-PLUS
iconPath: plus.io.convertLocalFileSystemURL('/static/dingwei.png')
// #endif
// #ifdef MP-WEIXIN
iconPath: '/static/dingwei.png'
// #endif
回到顶部