[转](1条消息) 使用echarts百度地图并更改地图样式(转载请删除括号里的内容)

echarts的配置项真的又多又杂
最近用echarts的地图真的头大，因为我们老板说想要科技感，但我改地图样式怎么也不生效，后来终于解决了
先看最后的效果图吧~
就讲讲地图趴

第一步：
获取百度地图的ak，这我之前博客有说过
然后下载echarts的依赖 npm i echarts --save
然后在组件内引用，一定记住要引入bmap
let echarts = require(“echarts”);
require(“echarts/extension/bmap/bmap”);
还有在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak你申请的ak&s=1"></script>

关于http和https请自行百度，因为我的项目已经部署好了，所以用的https还有一定在最后加上s=1

第二步：
html部分：

给地图一个容器

 <div ref="generalMap" class="general-map" id="generalMap"></div>

js部分：

import imgUrl from "@/assets/img/map-flag.png"; //引入自定义图标的图片，后面会用到methods: {myCharts() {let myChart = echarts.init(this.$refs.generalMap); //这里是为了获得容器所在位置let res_data = this.obj.schoolList;let option = {bmap: {center: [110.114129, 23.550339],zoom: 5,roam: true,},tooltip: {trigger: "item",backgroundColor: "#06AFFD",padding: [8, 20, 8, 12],extraCssText: "border-radius: 11px",formatter: function (val) {//返回tooltip的内容及布局样式return `<div style="font-size: 12px;color: #ffffff">学校：${val.data.schoolName}</div><div style="font-size: 12px;color: #ffffff">设备数：${val.data.deviceCount}（${val.data.onlineCount}台在线）</div>`;},},series: [{name: "设备数量",type: "custom", //type的值为'custom'时，表示自定义图标coordinateSystem: "bmap",data: res_data,renderItem(params, api) {let latitude = res_data[params.dataIndex].latitude; //把坐标数据取出来 纬度let longitude = res_data[params.dataIndex].longitude; //精度let arr = [longitude, latitude];//具体实现自定义图标的方法return {type: "image",style: {image: imgUrl, // 自定义的图片地址（上面引入，也可直接写图片的网络地址）x: api.coord(arr)[0], // 图标的经度    必须使用 api.coord（）方法对坐标进行转化之后位置才正确y: api.coord(arr)[1], //图标的纬度width: 30, // 图标大小设置height: 30,},};},},],};myChart.setOption(option);},}

mounted() {setTimeout(() => {this.myCharts();const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {echarts.getInstanceByDom(entry.target).resize();}});resizeOb.observe(this.$refs.generalMap);});},

到这里大家应该都能懂，就是一个配置的问题，因为我的项目需要用自定义图标还有自定义的悬浮框提示，所以就照着百度的改了改，大家可以照着参考，到这里就剩地图样式没改了，就是没有所说的科技感
这里我踩了很多坑

1.在这里配置：

bmap: {center: [110.114129, 23.550339],zoom: 5,roam: true,//官网在这里写的配置改地图样式，反正我在vue里没生效，不知道什么问题，大家可以试试，也许能成功mapStyle: {styleJson: [{'featureType': 'water','elementType': 'all','stylers': {'color': '#d1d1d1'}}]}},

我反正没用，继续找方法

2.找到node_modules文件夹，找到echarts的包，在这里
参照了这篇博客 https://www.codetd.com/article/4924456
找到extension这个文件夹的bmap的BMapCoordSys.js
路径是这样：
node_modules\echarts\extension\bmap\BMapCoordSys.js

找到这句话

 var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot, mapOptions);

这代码下面有这句代码

bmap.addOverlay(overlay); // Override

在这个代码下面改样式

bmap.setMapStyle({style:'light'});          //设置模板的初始风格，清新蓝

有用，能改样式了，激动一下，可是我的项目不止一处用到了地图，关键是样式还不一样，如果你们只有一处用到了，就可以直接改初始风格，我就继续找

3.既然可以bmap.setMapStyle({style:‘light’});
那么在组件的实例中是不是也可以呢
我是自己去百度地图个性化地图里配置了json，然后单独写一个js文件，再把这个js引入组件的
import { myStyleJson } from “./mapStyle.js”;
在创建实例后写上：
var bmap = myChart.getModel().getComponent(“bmap”).getBMap();
bmap.setMapStyle({ styleJson: myStyleJson });

成功啦

至于个性化地图，大家可以自行去配置
在这里

http://lbsyun.baidu.com/apiconsole/custommap 打开个性化地图样式编辑器去配置一下自己想要的样式
然后把json代码复制下来，就可以用啦

---------------------
作者：是小芬达呀
来源：CSDN
原文：https://blog.csdn.net/weixin_52921391/article/details/115000755?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161719559516780269815989%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161719559516780269815989&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-2-115000755.nonecase&utm_term=bmap++mapStyle
版权声明：本文为是小芬达呀原创文章，转载请附上博文链接！

[转](1条消息) 使用echarts百度地图并更改地图样式(转载请删除括号里的内容)相关推荐

[转](1条消息) 前端必知：针对高分辨率屏幕的样式优化(转载请删除括号里的内容)
苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持.嗯,迟到的文章,和大家简单的分享下. ...
[转](1条消息) vue 访问本地文件相对路径文件目录 three.js 加载模型(转载请删除括号里的内容)
环境: vue/cli 4.5.9 "three": "^0.124.0", "vue": "^2.6.11", &qu ...
Vue项目接入百度地图，更改地图主题色
接入流程: 1: 在Vue创建的项目里找到index.html的文件,在index.html文件里添加. <script type="text/javascript" src ...
掌握Rabbitmq几个重要概念，从一条消息说起
RabbitMQ 是功能强大的开源消息代理.根据官网称:也是使用量最广泛的消息队列.就像他的口号"Messaging that just works",开箱即用使用简单,支持多种消 ...
nodejs实现公众号服务URL绑定验证，nodejs实现公众号关注并回发送一条消息，以及关注之后的聊天自动回复消息
首先关注公众号的时候,公众号会发送一条 post 请求到 nodejs 服务器,这条消息是 xml 数据类型,这里就用到 xml 解析,demo 里用的是 fast-xml-parser@3.12.1 ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...

[转](1条消息) 使用echarts百度地图并更改地图样式(转载请删除括号里的内容)

[转](1条消息) 使用echarts百度地图并更改地图样式(转载请删除括号里的内容)相关推荐

最新文章

热门文章