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>

猜你喜欢

转载自blog.csdn.net/weixin_41192489/article/details/113033552