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>
目录
相关文章
|
9月前
|
定位技术
97Echarts - 地理坐标/地图(Draw Polygon on Map)
97Echarts - 地理坐标/地图(Draw Polygon on Map)
36 0
|
9月前
|
定位技术
95Echarts - 地理坐标/地图(Binning on Map)
95Echarts - 地理坐标/地图(Binning on Map)
25 0
|
2月前
|
前端开发 定位技术 API
|
2月前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
218 0
|
12月前
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
212 1
|
12月前
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
382 0
|
2月前
|
定位技术 Python
Python的pyecharts安装,导入map、geo模块,画地图
Python的pyecharts安装,导入map、geo模块,画地图
133 1
|
2月前
|
定位技术 Python
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
|
2月前
|
C++
c++ set、map的四种自定义排序方法
c++ set、map的四种自定义排序方法
111 0
|
2月前
|
小程序 JavaScript 定位技术
微信小程序地图控件Map的使用
微信小程序地图控件Map的使用
129 0