vue百度地图开发-2 主题颜色设置

最新推荐文章于 2024-08-01 15:51:28 发布
最新推荐文章于 2024-08-01 15:51:28 发布
阅读量8.7k 收藏 11
点赞数 1
分类专栏： vue百度地图开发 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39107711/article/details/104920940
版权
本文介绍了在Vue.js项目中如何设置百度地图的主题颜色。内容包括两种方法：一是通过百度地图提供的样式模板使用JavaScript API的setMapStyle方法；二是个性化编辑，利用编辑工具生成样式配置json并应用。由于JavaScript API 2.0的个性化地图服务仅维护，推荐使用v3.0的个性化服务以获取更好的展示效果。
摘要由CSDN通过智能技术生成

百度地图默认的颜色配置是白色版本。
在这里插入图片描述
如果我想要个暗黑色系，如何设置呢？
这时候就要设置主题了。
目前我用的是vue-baidu-map ^0.21.22版本，也就是对应着JavaScript API v2.0，所以2.0版本的方式：参考地址点击这里
一、通过百度地图提供的样式模板，选择地图，然后通过JavaScriptAPI的setMapStyle方法调用生效。
1、选择模板。
2、设置地图。

var mapStyle={  style : "midnight" }  
map.setMapStyle(mapStyle);

实际效果：
在这里插入图片描述
目前共有9种主题模板。地址参考点击这里
在这里插入图片描述

最低0.47元/天 解锁文章
星辰啊大海7857
关注
专栏目录
Vue项目接入百度地图，更改地图主题色
X_lizhu93的博客
09-20 5752
接入流程： 1: 在Vue创建的项目里找到index.html的文件，在index.html文件里添加。 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GfVXTzuM2GCyjrqk1joXN8oN"></script> 2.在需要添加地图的模块里创建百度...
vue设置百度地图自定义主题
RubyLinT的博客
08-02 4424
<template> <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :mapStyle="mapStyle"> </baidu-map> </template> <script> export default { data ()...
vue-baidu-map之地图的主题背景色设置
热门推荐
qq_38456049的博客
08-16 1万+
{BMap, map} 地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。 即不要再vue的生命周期中对地图的bmap和map实例进行操作，因为是无效的。 在 ready事件回调函数中使用即可。 实例如下： html中 <bai...
vue使用百度地图（vue-baidu-map）
王等等csdn的博客
08-29 7170
vue使用百度地图，vue-baidu-map
vue-baidu-map百度地图搜索功能，点击进行标点，获取经纬度坐标，百度地图使用黑色主题
qq_44091061的博客
02-16 2190
百度地图搜索功能，点击进行标点，获取经纬度坐标，百度地图使用黑色主题
vue-baidu-map自定义颜色
qq_36529240的博客
08-16 2229
一、自定义样式 data() { return { //自定义地图颜色 styleJson: [ { featureType: "water", elementType: "all", stylers: { color: "#021019", }, }, { featureType: "highway",
百度地图 变黑问题 解决方法
weixin_42213585的博客
08-15 7382
有地图的页面 这样定义一下 public static Activity mgpaActivity; public static MapView mMapView; @Override protected void onResume() { super.onResume(); mMapView.onResume(); getWi...
vue + echarts实现地图背景色
胖龙的博客
08-26 3285
实现代码 <!-- 地图上色 demo 李亚龙--> <template> <div id="map" /> </template> <script> export default { name: 'Hello2', mounted() { this.$nextTick(() => { /* 获取地...
不同颜色百度地图开发定位图标
12-19
"不同颜色百度地图开发定位图标"这个主题主要涉及的是如何利用颜色编码来增强地图上的视觉效果，使得信息传达更加直观。本文将深入探讨这一技术及其在实践中的应用。 首先，我们要理解百度地图API提供的功能。百度...
百度地图点聚合自定义样式
05-18
本文将深入探讨“百度地图点聚合自定义样式”这一主题，旨在帮助开发者更好地理解和实现在百度地图上自定义点聚合的样式。 点聚合是一种处理大量地图标记（points）的技术，当地图上的标记过于密集时，为了提高视觉...
vue全家桶+Echarts+百度地图，搭建数据可视化系统
xrkffgg前端
04-25 3888
本文章篇幅略长，内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。 本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌
vue3 - 详细实现高德地图交通实时路况拥堵缓行通畅颜色块(红黄绿)，如何在高德地图中展示某个区域路段的实时交通拥堵情况，交通路段是否通行顺畅，实时交通路况图，vue高德地图实时路况图层渲染显示教程
最新发布
高级前端工程师
08-01 3653
vue3，nuxt3，vue高德地图 实时路况，车流量，vue高德地图绘制某些路段的交通流量情况，vue中高德地图初始化及添加标准图层、实时路况图层，leaflet加载实时路况图层，导航时查看前方是否堵车，地图导航时监控正在行驶的路线拥堵情况，报错，不显示，开启实时路况教程，地图画多条拥堵线并且给多种颜色，实时路况图层，获取路线交通是否拥堵，用什么api，高德地图API，TileLayer.Traffic，如何得知某条路的汽车流量情况，vue如何在高德地图上标注地区全部路线的行驶是否拥堵情况，实时车流量监控
百度地图API底色主题更换
cc蒲公英的博客
02-09 2777
百度地图API底色主题更换
vue 百度地图自定义样式
汤玉鹏
08-14 4402
<template> <div class='amount'> <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="14" :mapStyle="mapStyle"> <bml-heatmap :data="data" :max="100" :radiu...
vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等
weixin_54106595的博客
03-23 5111
index.html 引入百度地图api： <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的的密钥"> 引入样式文件：我在官网上下载的样式文件，可以自定义 这个样式文件放在public文件夹下面的json文件夹里 <script type="text/javascript" src="json/custom_map_con
5. 百度地图api1.0-添加信息窗口
星银色飞行船的博客
10-25 775
百度地图api添加信息窗口
vue使用百度地图并设置自定义主题
湫沐椿风
05-24 1538
安装vue-baidu-map $ npm install vue-baidu-map --save 全局注册 //main.js import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap,{ ak: '你在百度地图申请的key' }) 页面使用 <template> <div> <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom
在vue-baidu-map中使用个性化地图
qq_38982650的博客
04-26 1313
vue-baidu-map使用个性化地图 、项目使用vue-baidu-map进行开发 使用baidu-map标签渲染地图并且mapStyle自定义样式，发现地图的底图已-经落后了 如果去掉mapStyle的属性, 底图又跟官网一样 最后查了一下baidu-map组件，发现封装的setMapStyle的方法是旧方法setMapStyle 现在新地图底图都是使用setMapStyleV2方法. 而且组件里面引用的js也是2.0的版本 解决方法 在index.html页面引入百度地图3.0js <
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值