uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示

举例：

预期效果如下，蓝色为用户位置，红色为店铺位置均为自定义图标
实际发布后手机上的效果（此处忽略位置先只关注图标问题）
可以很明确的看到自定义图标失效了，使用了原生自带的图标

问题复现

关键代码如下

<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开始引入，不要使用 …/…/ （目前不清楚为啥知道的补充告知）

解决

1.修改图片的类型
2.修改图片引入的路径方式

//地图标记点配置
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)

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示相关推荐

uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
uniapp 微信小程序 map自定义气泡customCallout
需求:要在marker的下方展示该站点名称,但默认的气泡是在上方,后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡直接上代码 <template>& ...
微信小程序map地图
使用微信小程序实现地图功能 wxml <mapid="myMap"style="width: 100%; height: 300px;"latitude= ...
微信小程序map地图调用（速学）
目录 wxml文件 js文件 lib下引入qqmap-wx-jssdkjs文件 json文件编译后点击选择地图也可点击真机测试,微信扫码查看 wxml文件 <view><text ...
uniapp微信小程序使用地图选点插件
uniapp使用腾讯位置服务地图选点文章目录 uniapp使用腾讯位置服务地图选点效果图 1. 在公众平台申请插件 2. 引入插件 3. 设置定位授权: 4. 使用插件效果图 1. 在公众平台申 ...
uniapp微信小程序实现地图导航
利用点击事件调用handleMapLocation()这个方法时获取了自己的定位,考虑到用户拒绝获取自己的定位所以当用户再次点击后会唤起设置让用户打开定位 handleMapLocation() { ...
微信小程序分享到朋友圈-遇到的问题drawImage真机不显示网络图片
网上有现成的例子,所以直接拿来用了,见链接,接下来说下自己遇到的问题 -> 因为在我的项目中,我的图片是网络图片,canvas上绘制的目前只支持本地图片,那应该怎么办呢?不可能图 ...

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示

举例：

问题复现

问题所在

解决

bye)

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示相关推荐

最新文章

热门文章

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示

举例：

问题复现

问题所在

解决

bye) insertAdIfNeeded();

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示相关推荐

最新文章

热门文章

bye)