举例:
- 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标
- 实际发布后手机上的效果 (此处忽略位置先只关注图标问题)
- 可以很明确的看到自定义图标失效了,使用了原生自带的图标
问题复现
<template> <map style="width: 100%; height: 240px;" :latitude="params.lat" :longitude="params.lon" :markers="covers" /></template><script lang="ts" setup>const covers = reactive([ { id: 1, iconPath: '../../static/image/map-store-red.svg', latitude: 0, longitude: 0, width: 24, height: 32 }, { id: 2, iconPath: '../../static/image/map-owner-blue.svg', latitude: 0, longitude: 0, width: 24, height: 32, },])</script>
问题所在
- 1.图标问题 在采用自定义图标时 请使用图片 不要使用 svg类型的,使用svg类型的图标,在微信小程序开发者工具上不会出现问题,但是一旦使用真机调试或者发布后,无法显示自定义配置图标
- 2.路径问题 在引入时直接从
/static/xxx
开始引入,不要使用 …/…/ (目前不清楚为啥知道的补充告知)
解决
const covers = reactive([ { id: 1, iconPath: '/static/image/map-store-red.png', latitude: 0, longitude: 0, width: 24, height: 32 }, { id: 2, iconPath: '/static/image/map-owner-blue.png', latitude: 0, longitude: 0, width: 24, height: 32, },])
- 路劲参考
bye)🤡
来源地址:https://blog.csdn.net/dccose/article/details/130066978
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341