echarts使用个性化百度地图(bmap)加载出现空白问题

2023-11-03 09:50

本文主要是介绍echarts使用个性化百度地图(bmap)加载出现空白问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原因分析

主要因为百度地图v2.0添加了个性化样式设置(给option.bmap中添加了styleJson配置)造成的,如果需要解决就要用v3.0,设置个性化的方式也不一样,引入的百度地图版本也要改成v3.0

解决方式

获取styleId过程:

如果要是用styleid就必须要和引入的key是同一个账号才可以

  1. 进入百度地图开放平台控制台https://lbsyun.baidu.com/apiconsole/center#/home
  2.  进入个性化地图页面,第一次进入点击新建​​​​​​​
  3. 点击新建之后进入此页面,点击左下角的详情样式编辑器即可创建属于你的个性化百度地图
  4. 创建完之后可点击右上角的发布样式即可生成属于你的styleId,在页面使用的styleId一定要和你的key是同一个账号(点击主页可查看获取百度地图key教程)

 

 

v3.0版本除了可以使用styleId外也可以跟v2.0一样使用 styleJson,不过不推荐这种,如需要可去官网查看使用方法

 个性化百度地图官方教程:

https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/custom

github官网示例:

https://github.com/apache/echarts/blob/release/extension-src/bmap/README.md

 代码


created() {this.$nextTick(() => {this.loadBMap('你自己申请的百度地图key').then(() => {console.log('走了')this.initMap()}).catch(() => {console.log('没有走到')})})
},methods:{//加载bmap链接loadBMap(ak) {return new Promise(function (resolve, reject) {if (typeof BMap !== 'undefined') {resolve(BMap)return true}window.onBMapCallback = function () {console.log('哈哈哈')resolve(BMap)}let script = document.createElement('script')script.type = 'text/javascript'//这里要改为v3.0 script.src = 'https://api.map.baidu.com/api?v=3.0&ak='+ak + '&callback=onBMapCallback'script.onerror = rejectdocument.head.appendChild(script)})},initMap(){/dom元素let chartDom = document.getElementById('xxx');let myChart = echarts.init(chartDom);let option;//位置数据const data = [];const geoCoordMap = []'option = {legend: {left: '3%',top: '3%',data: ['xxx', 'xxx'],orient: 'vertical',backgroundColor:'#000',borderRadius:5,padding:[10,20],textStyle: {color: '#fff',}},title: {text: 'xxxx',// subtext: 'data from PM25.in',// sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,// v2.0使用(不推荐会出现空白以及控制台报错)mapStyle: {styleJson: []},//v3.0使用(推荐)mapStyleV2:{//自己在百度地图生成的个性化样式idstyleId:'xxxxx'}},series: [{name: 'xxx',type: 'scatter',coordinateSystem: 'bmap',data: convertData(data),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},label: {formatter: '{b}',position: 'right',show: false},emphasis: {label: {show: true}}},{name: 'xxxx',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#333'},emphasis: {scale: true},zlevel: 1}]};option && myChart.setOption(option);}}

这篇关于echarts使用个性化百度地图(bmap)加载出现空白问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/337342

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(