01、bmap设置地图样式mapStyle，不起作用

已于 2024-03-28 19:42:36 修改
阅读量275 收藏
点赞数 3
文章标签： echarts
于 2024-03-28 19:01:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43889087/article/details/137120880
版权

使用echarts4.7 ＋基于vue2.0的v-charts 组件库绘制地图，bmap做底图，定制的地图样式mapStyle不起作用

1、检查styleJson格式是否正确

2、都没错的情况下，修改此处代码

此处由 newMapStyle2 改为 newMapStyle 即可，，，bmap的定制样式 即可生效

晓敏 �
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-baidu-map使用setMapStyleV2自定义样式
jt19880807的专栏
10-29 8558
Vue项目中使用百度地图，用到了vue-baidu-map，但是里面用到的API是2.0，其自定义样式mapStyle性能不是很好，在使用3.0的setMapStyleV2报如下错误： vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: map.setMapStyleV2 is not a function" found in ---> <BmMap> at node_modules/v
vue用BMap百度地图实现即时搜索功能
12-30
本文实例为大家分享了vue用BMap百度地图实现即时搜索功能的具体代码，供大家参考，具体内容如下 功能如下： 搜索框搜索—自动下拉—点击数据—数据显示在搜索框里—点击新增–数据显示在下方–点击删除–删除当前 ...
百度地图开发mapStyle个性化地图styleJson的配色解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-01 1万+
mapStyle: { styleJson: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'lan..
Vue中 使用个性化地图样式
路虽远行则将至，事虽难做则必成。
11-30 3022
在实际开发中往往会遇到在做某一个功能时，不能使用白色的地图，这样达不到效果。其实百度API也想到了这一点，它也提供了个性化地图，在官网选择符合要求的地图样式发布，调用API在实际使用过程中我们要注意，应该在你引入的AK账号发布符合要求的个性化地图样式在Vue中给Vue-Baidu-Map加个性化样式的时候可能会因为版本问题报错但是我也查阅了很多资料下面会讲解报错和解决方案地图个性化样式也是有付费的，比如地图模板左上角有授权专用但也有免费的样式使用，也能满足要求百度地图官方文档官网。
Echarts与bmap结合使用百度地图系统自带的12个个性化模板mapStyle列表
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-09 3541
bmap样式设置 bmap: { center: [113.844038, 22.907044],//默认中心点; zoom: 12,//缩放级别； roam: false,//是否缩放 mapStyle:{style:'hardedge'} }, 设置地图样式,将style改为模板下方的英文名称：`mapStyle:{style:‘hardedge’} 系统自带12个样式，具体
echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
qq_34695703的博客
08-11 9902
1. 实现功能 实现简单的自定义样式百度地图，仅显示（基础，可自己研究扩展） 效果： 2. 代码步骤 第一步：创建基础结构，id=“map” 的 div做 echarts 容器 <!DOCTYPE html> <html> <head> <title>Echarts - 百度地图</title> <meta charset="utf-8"> <style type="text/css"> ...
BMap离线地图资源包
10-10
很多项目需要在内网环境中运行，因此少不了离线地图，在此将自己辛苦总结的东西贡献给同行以供参考使用。
bmap全国省市地图包
05-19
百度地图全国地图包，js和json两种，在使用bmap时候引入使用，开发数据可视化页面有时会引入使用地方的地图包，此资源就是全国省份地图包
基于Echarts和Bmap的地图插件.zip
12-10
使用百度地图和Echarts制作的地图页面，页面可以显示震级，预留后台接口，代码清晰易懂，打开即可使用。（注：开发所使用的百度地图的授权码是我个人的授权码，诸位下载之后还请换成自己的授权码。）文件包含bmap.js...
百度地图的Hello World具体操作
ArcGis_Niu的博客
03-08 594
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 基于JavaScript的百度地图二次开发 Hello World前言一、前期准备1.申请密钥二、使用步骤1.程序媛最爱的Ctrl C与Ctrl V2.替换密钥3.另存文件4.完成！三、具体解释1.本例中使用到的相关参数设置var point = new BMapGL.Point(经度,纬度);map.centerAndZoom(point, 15);2.其他参数：map.setMapStyleV2({styleId: '样式ID'});总
Vue BaiduMap 自定义样式的坑
cai454692590的博客
08-04 2648
发现问题 项目使用vue-baidu-map进行开发 使用baidu-map标签渲染地图并且mapStyle自定义样式，发现地图的底图已经落后了。 如果去掉mapStyle的属性, 底图又跟官网一样, 最后查了一下baidu-map组件，发现封装的setMapStyle的方法是旧方法setMapStyle 现在新地图底图都是使用setMapStyleV2方法. 而且组件里面引用的js也是2.0的版本 解决问题 在index.html页面引入百度地图3.0js <script type=
百度地图 BMap InfoWindow修改默认样式 Css
热门推荐
moonlight的博客
01-08 3万+
默认的框一片白色，太丑，自己根据样式修改了一下，主要用到的样式都贴上来了，可根据自己需要修改。 Css样式如下 /*地图标题*/ .BMap_bubble_title { color:white; font-size:13px; font-weight:bold; text-align:left; padding-left:5px; padding-top:5px; borde...
百度地图如何去除路网图，建筑物，建筑物名称
u013455430的专栏
05-31 2万+
2019.6.17更新 由于我的项目突然出现了白屏的问题，定位bug到设置样式的函数，一旦设置样式就会报跨域请求阻塞的问题，花了一个中午的时间给解决了，百度真坑.. 目前想要设置百度地图的样式需要作出以下调整 需要将原有的2.0版本修改为3.0版本 需要调用3.0版本设置样式的函数setMapStyleV2()，其他参数不变 需要将所有的设置函数放在样式设置位置以上，否则会报父节点找不到...
【转载】Vue打包后Echarts图表不显示问题解决
非晓为骁的博客
02-21 3266
原文链接：https://blog.csdn.net/yyz_1987/article/details/119903964 工作中刚好碰到的问题，然后找到这篇文章，这篇文章是转载的。 最近发现一奇怪问题，正常本机测试情况下，echarts图表显示的没问题。但是只要打包后部署到nginx里，第一次首页加载没问题，但进入其他tab页面再返回首页时，echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。 网上有很多的说辞和办法，但试过了都没有效果。最后经过不断的尝试摸索，终于解决啦。 有的说是生命
bMap+Echarts--百度地图使用方法
huanhuan03的博客
04-14 8797
bMap+echarts
vue-baidu-map之地图的主题背景色设置
qq_38456049的博客
08-16 1万+
{BMap, map} 地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。 即不要再vue的生命周期中对地图的bmap和map实例进行操作，因为是无效的。 在 ready事件回调函数中使用即可。 实例如下： html中 <bai...
vue-baidu-map中直接使用mapStyle设置样式，点击marker时地图上会有白屏闪烁
pgLi
08-05 6010
背景：在<baidu-map>中直接定义mapStyle，在添加marker后，点击marker时会出现白屏闪烁 <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :mapStyle="{style:'midnight'}" ...
vue 百度地图开发【教程】3. 自定义百度地图主题
朝阳39的博客
02-08 851
目录 1. data 中定义地图和样式 2. mounted 中设置样式 setMapStyle 3. 最终效果 以下操作，都基于【教程】1 中绘制的百度地图https://blog.csdn.net/weixin_41192489/article/details/113742927 <div id="myMap" style="height: 400px"></div> 1. data 中定义地图和样式 样式可以参考链接获取 https://blog.csd..
ercharts结合地图后，如何修改mapStyle中poi的字体颜色和大小？
最新发布
05-24
如果您是使用 echarts 中的百度地图扩展组件，可以通过以下方式修改 poi 的字体颜色和大小： 1. 在初始化地图时，将 `mapStyle` 中的 `styleJson` 替换成您需要的样式： ```javascript var myChart = echarts.init(document.getElementById('main')); var mapStyle = { styleJson: [ { "featureType": "all", "elementType": "all", "stylers": { "lightness": 10, "saturation": -100 } }, // 其他样式配置 ] }; myChart.setOption({ bmap: { center: [116.407526, 39.90403], zoom: 11, roam: true, mapStyle: mapStyle }, // 其他图表配置 }); ``` 2. 在 `styleJson` 中找到 `poi` 的样式配置，修改其中的 `textStyle` 属性即可： ```javascript var mapStyle = { styleJson: [ { "featureType": "poi", "elementType": "label", "stylers": { "visibility": "on", "color": "#ff0000", // 修改字体颜色 "fontSize": "16" // 修改字体大小 } }, // 其他样式配置 ] }; ``` 注意，修改后可能会影响到其他 `poi` 的样式，您需要根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值