以下操作,都基于【教程】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. 最终效果