领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

vue中maptalks自定义marker时,出现 no img found for xxxxx

nixiaole 2024-11-24 19:56:42 知识剖析 19 ℃

在vue项目中使用maptalks已经是好几年了,中间也遇到很多的困惑,主要是感觉文档不是很全,可能是我阅读的不够仔细,比如更新marker点的图标等方法都是在作者的github上找到的,如:

marker.updateSymbol({

markerWidth:{[[14,18],[18,120]]},

markerHeight:{[14,24],[18,160]},

markerFile:require('@/assets/img/marker.png')

}),

marker.setZIndex(100)

这样就可以更新落点的样式了,但是有时候落点的图标并没有加载出来,控制台会出现no img found for http://10.167.54.80:8080/#//xxxxx.png的警告,出现的原因是因为:更新的图片过大,我用的图标是30x30,大小为1.45kb,换成72X74的,大小为4.2kb就会报这个问题

解决方法 (亲测有效)

1:把图片的尺寸改小,到底适应多大的图片没有亲测过,

2:换成大图片后图片的路径不对,变成了 http://10.xxx.xxx.xx:8080/#//xxxxx.png,

那就动态修改路径,如点击获取当前marker

let markerImg=type==='你的判断'?window.location.origin+require('@/assets/big.png'):require('@/assets/small.png')

marker.updateSymbol({

markerWidth:{[[14,18],[18,120]]},

markerHeight:{[14,24],[18,160]},

markerFile:markerImg

}),

这样就可以了。

暂时没有搞懂加载大图标时会出现这样的问题,有空读下源码可能会找到答案!有兴趣的朋友可以多多交流和探讨!

最近发表
标签列表