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也无效,微信小程序都显示正常。

更多关于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还有同样的问题,是什么原因,你路径写对绝对路径还是相对路径
现在使用iconPath宽高还是无效,还有label也是,只显示文字
这是一个常见的路径问题。在uni-app的App端,map组件的iconPath需要使用绝对路径或base64格式。
问题分析:
- 在App端,相对路径(如
../../static/)和以/static/开头的路径可能无法正确解析 - 微信小程序能正常显示是因为小程序的路径解析机制与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


