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

news/2024/7/20 1:44:16 标签: 微信小程序, uni-app, 小程序

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)🤡


http://www.niftyadmin.cn/n/203758.html

相关文章

微信小程序开发(学习记录1.0)

首先&#xff0c;把遇到的问题贴出来&#xff0c;主要是这个解决问题的思路&#xff0c;供大家参考。 现在的问题是将下面的导航栏做出来&#xff0c;但是在自己做的时候 遇到的问题 在app.json文件中输入tarBar&#xff0c;就会生成模板代码&#xff0c;默认会生成一个list的模…

uniapp开发小程序-swiper点击预览大图(商品详情页轮播图)

1.实现效果&#xff1a; 2.具体代码&#xff1a; <view class"swiper_box"><!--轮播图--><swiper class"ms_swiper" :autoplay"true" circular"true" change"swiperChange"><swiper-item v-for"…

气象站是什么?有什么用途?

走到田间地头&#xff0c;市区道路&#xff0c;校园院区&#xff0c;公园&#xff0c;厂区等我们会看到很多带太阳能板的&#xff0c;高高的支架上放置着很多小器件的设备&#xff0c;甚至有的还有led屏轮回播放风速:1m/s 风向&#xff1a;东南 空气温度&#xff1a;18.5℃ …

异步线程池 CompletableFuture 异步编排 【下篇】

1、创建异步对象 CompletableFuture 提供了四个静态方法来创建一个异步操作。 提示 1、runXxxx 都是没有返回结果的&#xff0c;supplyXxx 都是可以获取返回结果的2、可以传入自定义的线程池&#xff0c;否则就用默认的线程池 1.1 不存在返回结果 public class ThreadTestD…

【运维】Linux 服务器定时重启的实现方式

说明 CentOS 定时重启可以通过两种方式实现&#xff1a;使用 cron 定时任务或者利用 systemd 的 timer 功能定时执行脚本。下面分别介绍这两种方法的配置和脚本实现。 cron 定时任务 执行以下命令以 root 用户身份打开 /etc/crontab 文件进行编辑&#xff1a; vi /etc/cron…

福布斯发布2023全球亿万富豪榜

中国内地亿万富豪人数仍位居全球第二&#xff0c;仅次于美国。 对于全球富豪们来说&#xff0c;过去的一年充满挑战。利率骤增、股价承压、独角兽估值受挫&#xff0c;无一不对全球企业经营造成巨大影响。 2023福布斯全球亿万富豪榜的上榜人数较去年下降28位&#xff0c;总人…

python orm框架

python orm框架是一个数据处理框架&#xff0c;它提供了许多有用的工具&#xff0c;包括&#xff1a; 1、使用 pandas库对数据进行预处理&#xff0c;如&#xff1a;添加标签、删除重复值、转换为表格样式等。 2、使用 sql语句进行数据的增删改查&#xff0c;如&#xff1a;在m…

uniapp 页面滚动获取元素高度

onPageScroll() {let _this this;let info uni.createSelectorQuery().select(".entity-box");info.boundingClientRect(function(data) { //data - 各种参数// console.log(data) // 获取元素宽度// 下面的容器露出相应的结算栏就置于底部if (data.top < 0) {_…