vue-baidu-map 自定义地图主题

简介: vue-baidu-map 自定义地图主题

目标效果

将道路填充为深蓝色   #185790ff

完整代码

添加  :mapStyle="mapStyle"  ,在 data()中定义mapStyle ,通过  百度地图主题编辑器【点我查看使用教程】 获取 styleJson

<template>
    <baidu-map :mapStyle="mapStyle" style="height: 400px;width: 100%" :zoom="12" center="深圳"
               :scroll-wheel-zoom="true">
    </baidu-map>
</template>
<script>
    export default {
        data() {
            return {
                mapStyle: {
                    // 百度地图主题编辑器
                    // https://developer.baidu.com/map/custom/
                    styleJson:
                        [
                            {
                                "featureType": "road",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#185790ff"
                                }
                            }
                        ]
                }
            }
        },
    }
</script>
<style>
</style>
目录
相关文章
|
定位技术
97Echarts - 地理坐标/地图(Draw Polygon on Map)
97Echarts - 地理坐标/地图(Draw Polygon on Map)
62 0
|
定位技术
95Echarts - 地理坐标/地图(Binning on Map)
95Echarts - 地理坐标/地图(Binning on Map)
41 0
|
4月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
271 1
|
7月前
|
前端开发 定位技术 API
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
580 0
|
7月前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
373 0
|
7月前
|
定位技术 Python
Python的pyecharts安装,导入map、geo模块,画地图
Python的pyecharts安装,导入map、geo模块,画地图
176 1
|
7月前
|
定位技术 Python
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
|
7月前
|
C++
c++ set、map的四种自定义排序方法
c++ set、map的四种自定义排序方法
369 0