关于百度地图开放平台api覆盖物“自定义Marker图标”不能正常显示的解决方案

news/2025/2/3 20:07:51/

“自定义Marker图标”不能正常显示(用网上图片能正常显示,用本地图片就不能显示),
分两种情况:
1.网上图片,往往是图片的url地址有问题,也可能是url地址的图片失效了。
2.本地图片,这个有说需要用require包裹的,有说需要用import导入的,照着做了都没成功,最后是结合web页面控制台报错信息发现了问题所在:
CORS引起的
CORS(Cross-origin resource sharing) “跨域资源共享”
web页面中的报错如下:
报错1:from origin ‘null’ has been blocked by CORS policy
报错2:Failed to load resource: net::ERR_FAILED

个人理解就是,本地图片上传给 百度地图 api 时是不满足 跨域同源策略的,所以百度地图api尝试获取咱们的本地图片时被浏览器给阻挠了。
解决的办法如下:

通过拜读 楠鱼上青天 大神的文章,通过在 vscode中下载插件 live server ,通过 live server 打开 html页面,轻松解决问题,
大神文章如下,感兴趣的同学可以移步观看,记得给大神点赞呦。
在这里插入图片描述
大神文章链接:https://blog.csdn.net/weixin_45749480/article/details/119936038

在vscode 中使用 live server 插件的方法:
1.在vscode中安装 live server 插件,并开启 live server 服务
在这里插入图片描述
在这里插入图片描述

2.使用 live server 打开 目标 web html 页面
在这里插入图片描述
在这里插入图片描述
问题解决。

注意事项,本地图片若和 html 页面在同级目录下,直接写文件名即可,若不同级,则写相对路径,不要写绝对路径,绝对路径不好使。

may2023the07thSunday


http://www.ppmy.cn/news/63640.html

相关文章

C++数据结构与算法详解:链表、栈、队列、树、二叉树和图结构的实现与应用

C/C 基础知识 三一、链表1.1 定义1.2 实现1.2.1 单向链表1.2.2 双向链表1.2.3 常见操作(反转 合并 查找)1.3 应用二、 栈-Stack 队列-Queue1.1 定义1.2 实现1.2.1 数组实现 栈和队列 示例:1.2.3链表实现 栈和队列 示例:1.3 应用三、树和二叉树1.1 定义1.…

【Linux】Linux安装Redis(图文解说详细版)

文章目录 前言第一步,下载安装包第二步,上传安装包到/opt下(老规矩了,安装包在opt下)第三步,解压安装包第四步,编译第五步,安装第六步,配置redis第七步,设置开…

【华为OD机试python】静态扫描【2023 Q1 A卷|100分】

华为OD机试- 题目列表 2023Q1 点这里!! 2023华为OD机试-刷题指南 点这里!! 题目描述 静态扫描可以快速识别源代码的缺陷,静态扫描的结果以扫描报告作为输出: 1、文件扫描的成本和文件大小相关,如果文件大小为N,则扫描成本为N个金币 2、扫描报告的缓存成本和文件大小无…

Android编译优化之混淆配置

Android编译优化之混淆配置 背景 为了使用java8及后续java新版本的特性,Google增加了一步编译过程—脱糖(desugaring),但这一步会导致更长的编译时间,这也是为什么Google会推出D8和R8编译器来优化编译速度。 什么是脱…

Docker Compose-简单安装与卸载教程

文章目录 Windows安装Linux安装PIP 安装Mac安装Linux下的卸载 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose,您可以使用 YML 文件来配置应用程序需要的所有服务。然后,使用一个命令,就可以从 YML 文件配置中创建并启…

python对象方法 反射

前言 类实例化得到的对象可以直接调用类中定义的函数,并且可以将对象本身作为第一个参数,那么类能不能也能像对象一样使用类体中的函数而不需要传递第一个参数呢?如果我们使用别人封装好的类,如何判断这个类或者对象是否有某个属…

5.10晚间黄金CPI精准分析及多空交易策略

近期有哪些消息面影响黄金走势?本周黄金多空该如何研判? ​黄金消息面解析:周三(5月10日)亚欧盘中,现货黄金震荡下跌,现报2030美元/盎司,稍早一度触及2038美元/盎司高点。美联储理事…

ChatGPT作者John Schulman:通往TruthGPT之路

OneFlow编译 翻译|贾川、徐佳渝、杨婷 大型语言模型(LLM)有一个众所周知的“硬伤”——它们经常会一本正经编造貌似真实的内容。 OpenAI团队希望通过改进强化学习反馈步骤“原生地”阻止神经网络产生幻觉,OpenAI首席科学家Ilya …