iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示
  • 147
分享到

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

微信小程序uni-app小程序 2023-09-04 17:09:21 147人浏览 薄情痞子
摘要

uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示 举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标 实际发布后手机上的效果 (此处忽略位置

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

来源地址:https://blog.csdn.net/dccose/article/details/130066978

--结束END--

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

本文链接: https://www.lsjlt.com/news/394071.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作