漏刻有时百度地图API实战开发(7)个性化地图加载瓦片空白和Echarts加载bmap元素跟踪重影

在这里插入图片描述

一、地图瓦片加载缓慢或者空白

在使用百度个性化地图时,出现地图瓦片加载缓慢或者空白

解决方案

1.替换百度地图API引入方式

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=I2428Rc4FDz00LSGUYfISLcbPsxOfjxl"></script>

改为:

<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=I2428Rc4FDz00LSGUYfISLcbPsxOfjxl"></script>

2.解决Mixed Content

Mixed Content: The page at ‘’ was loaded over HTTPS, but requested an insecure script ‘’. This request has been blocked; the content must be served over HTTPS.

参见:《Mixed Content: The page was loaded over HTTPS, This content should also be served over https解决方案》

在这里插入图片描述

二、bmap地图元素鬼影重重

百度地图和Echarts使用bmap组件时,元素不跟随,出现鬼影。

解决方案

匹配对应的对应版本的echarts.min.js和bmap.min.js版本即可。

    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=I2428Rc4F**"></script><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>

三、个性化地图版本

版本说明
JavaScript API支持的个性化地图服务有两个版本,旧版个性化地图服务(Map.setMapStyle接口)已经不再更新。本文介绍新版本个性化地图服务(Map.setMapStyleV2接口)的使用方式。

1.两个版本的区别如下表所示:

在这里插入图片描述

bmap加载个性化地图的方式

1. bmap加载

 bmap: {center: [113.328755, 23.135588],zoom: 17,roam: true,mapStyle: {}}

2. 百度地图接口加载

        // 百度地图接口对接设置;var map = myChart.getModel().getComponent('bmap').getBMap();// 地图自定义样式map.setMapStyle()

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Prometheus-IDC环境网络设备监控

均采用docker-compose部署Prometheus基础环境 部署参考https://blog.csdn.net/ht9999i/article/details/134733793?spm1001.2014.3001.5501 开头 一.部署Prometheus # cat docker-compose.yml version: "3" services:prometheus:#image: prom/prometheus:v2.0.0…

.NET 8 发布!

作者&#xff1a;Gaurav Seth 排版&#xff1a;Alan Wang 请立即下载 .NET 8&#xff01; 我们很高兴地宣布从今天开始 .NET 8 正式发布&#xff0c;它是世界领先的开发平台之一的最新 LTS 版本。.NET 8 提供了数以千计的性能、稳定性和安全性改进&#xff0c;以及平台和工具增…

中学老师求职简历(精选9篇)

以下简历内容以中学老师招聘需求为背景&#xff0c;我们整理并修改了9篇全面、专业且具有参考价值的简历案例&#xff0c;大家可以灵活借鉴&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 中学老师简历下载&#xff08;可在下制作下载&#xff09;&#xff1a;百度幻主简…

抓取微信好友列表信息

本文实现的是一种较为安全、简洁、高效的抓取微信好友信息的方法。 实现工具&#xff1a;微信pc端、影刀RPA 主要流程&#xff1a; 手动—前期准备&#xff0c;电脑登陆微信&#xff0c;打开联系人页&#xff0c;使得联系人分类“A”显现在微信窗口界面 自动—运行程序&#…

JDK21无法导入TimeUnit类

运行环境&#xff1a;windows11、IDEA2023.1.3、JDK21 问题描述&#xff1a;IDEA中无法导入java.util.concurrent.TimeUnit类。 以下截图是问题解决后的截图。有问题的时候未截图&#xff0c;说明一下&#xff0c;有问题的时候TimeUnit类是红色的&#xff0c;无法导入&#x…

vue3中的provide与inject跨层级组件(祖孙)间通信

provide和inject提供依赖注入&#xff0c;功能类似 vue2.x 的provide/inject 实现跨层级组件(祖孙)间通信 子或孙子组件接收到的数据可以用于读取显示&#xff0c;也可以进行修改&#xff0c;同步修改父&#xff08;祖&#xff09;组件的数据。 注意&#xff1a;无论子组件…

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码)

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码&#xff09; 这次项目所使用的代码如果同志们可以灵活使用&#xff0c;基本上可以解决百分之九十以上的pdf模板自动化生成。 最近博主&#xff0c;做了一个项目&#xff0c;使用reportlab制作pd…

程序包不存在

idea2020会有一个小bug&#xff0c;在idea的Settings设置中进行下面配置&#xff1a; 然后在maven项目下的pom.xml中加入如下代码&#xff1a; <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifact…

【Android面试|华为|锁相关】- synchronize(this) 和 synchronize(class)有什么区别

华为面试官问了其中一个问题 Q: synchronize(this) 和 synchronize(class)一样么&#xff1f; 是否可以用synchronize(this) 来锁 A: 当使用 synchronized 加锁 class 时&#xff0c;无论共享一个对象还是创建多个对象&#xff0c;它们用的都是同一把锁&#xff0c;而使用 sync…

【趣味JavaScript】一文让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! 《重置版》

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起学习和进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&a…

Oracle忘记所有密码怎么办

最近遇到一个Oracle的问题&#xff0c;密码要过期了&#xff0c;但是除了用户密码&#xff0c;其他密码都不知道了&#xff0c;修改不了密码怎么办呢&#xff1f; 试了各种方法&#xff0c;最终下面的方式生效了&#xff1a; 首先&#xff0c;使用orapwd生成新的密码文件&…

云计算如何创芯:“逆向工作法”的性感之处

在整个云计算领域&#xff0c;能让芯片规模化的用起来&#xff0c;是决定造芯是否成功的天花板。在拉斯维加斯的亚马逊云科技2023 re:Invent则是完美诠释了这一论调。 亚马逊云科技2023 re:Invent开幕前两个小时&#xff0c;有一场小型的欢迎晚宴&#xff0c;《星期日泰晤士报》…

BUUCTF [GXYCTF2019]SXMgdGhpcyBiYXNlPw== 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 密文&#xff1a; 下载附件&#xff0c;解压得到flag.txt文件。 解题思路&#xff1a; 1、打开flag.txt文件&#xff0c;内容如下。 Q2V0dGUgbnVpdCwK SW50ZW5hYmxlIGluc29tbm…

【如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程】

如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程 写个Bat 批处理文件&#xff0c;现自动编译Keil工程和C# Visual Studio工程。这样可以结合Python 实现复杂的操作。 编译Keil工程&#xff1a; echo off set UVC:\Keil_v5\UV4\UV4.exe set UV_PRO_PATHD:\worksp…

React有哪些优化性能的手段?

使用合成事件&#xff1a;React的合成事件系统能够提高性能&#xff0c;因为它使用事件委托&#xff0c;将事件监听器挂载在顶层容器上&#xff0c;而不是每个DOM元素上。减少了事件监听器的数量&#xff0c;从而减小了内存和性能开销。 使用组件级别的shouldComponentUpdate或…

Python编程题集(第三部容器操作 )

Demo61 指定等级 题目描述 读入学生成绩&#xff0c;获取最高分best&#xff0c;然后根据下面的规则赋等级值&#xff1a; &#xff08;1&#xff09;如果分数≥best-10&#xff0c;等级为A &#xff08;1&#xff09;如果分数≥best-20&#xff0c;等级为B &#xff08;1…

常见基础指令【Linux】

目录 一、Linux基本指令1. ls2. pwd3. cd4. touch5. mkdir6. rm和rmdir7. man8. cp9. mv10. cat11. tac12. more13. less14. head15. tail16. date17. cal18. find19. grep20. zip/unzip21. echo22. wc23. tree24. which25. alias26. whoami27. stat28. tar29. uname30. shutdo…

React实现登录授权功能

一、概述 本文将通过React Router & React Redux & Umi.js useModel 实现登录和授权路由功能。 二、技术实现 auth-action-reducer (redux配置) export const Login (username, password) > ({type: login,username: username,password: password }; export con…

vue3+element-plus之el-date-picker日期选择器清空无回调的解决方案

MENU 前言解决htmlJavaScrip 前言 在一个任务列表的搜索栏&#xff0c;添加一个日期区间搜索。使用到element-plus中的日期选择器el-date-picker&#xff1b;el-date-picker本身方法中有change事件&#xff0c;但是清空按钮没有对应回调方法。在任务列表的搜索需求中&#xff0…

如何自定义winform控件,并把它添加到工具箱,供拖动使用

首先&#xff0c;在想要用自定义控件的解决方案中新建一个项目&#xff0c;该项目用来存放所有的自定义控件。 解决方案-右键-添加-新建项目 添加新项目的界面选择Windows窗体控件库&#xff0c;点击确定。 此时&#xff0c;已经添加好了新的项目&#xff0c;默认会有一个自定…