vue 百度地图开发【教程】3. 自定义百度地图主题

简介: vue 百度地图开发【教程】3. 自定义百度地图主题

以下操作,都基于【教程】1 中绘制的百度地图  https://blog.csdn.net/weixin_41192489/article/details/113742927

<div id="myMap" style="height: 400px"></div>

1. data 中定义地图和样式

样式可以参考链接获取 https://blog.csdn.net/weixin_41192489/article/details/113035214

map: null,
styleJson: [
        {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#57afacff"
            }
        },
        {
            "featureType": "all",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#1a3547ff"
            }
        },
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": {
                "color": "#15223bff"
            }
        },
        {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#e9eeed00"
            }
        },
        {
            "featureType": "land",
            "elementType": "all",
            "stylers": {
                "color": "#101b2eff"
            }
        },
        {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
                "color": "#273d64ff"
            }
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#185790ff"
            }
        }
    ],

2. mounted 中设置样式 setMapStyle

// 构造地图时,关闭地图默认的可点击功能
this.map = new BMap.Map("myMap", {enableMapClick: false});
this.map.setMapStyle({styleJson:this.styleJson});
this.map.centerAndZoom("上海",15);

3. 最终效果

目录
相关文章
|
2天前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
4 0
|
2天前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
6 0
|
2月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
160 10
|
2月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
97 9
|
2月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
48 8
|
2月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
46 7
|
2月前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
57 4
|
2月前
|
缓存 网络协议 Linux
百度搜索:蓝易云【解决github push/pull报错443】
通过以上方法,你有望解决GitHub push/pull报错443的问题。如果问题仍然存在,建议检查GitHub的状态页面,看是否有正在维护或故障的情况。
91 3
|
2月前
|
Linux Perl
百度搜索:蓝易云【Linux常用命令awk】
以上仅是awk命令的一些常见用法,它还有许多更复杂的功能和用法,可以根据需要灵活运用。awk在文本处理和数据分析中非常实用,是Linux系统中的一把利器。
34 2
|
2月前
|
编解码 应用服务中间件 nginx
百度搜索:蓝易云【基于Nginx与Nginx-rtmp-module实现】
综上所述,基于Nginx与Nginx-rtmp-module的组合,可以搭建一个功能强大的流媒体服务器,用于实现直播和点播服务。
58 1