Map自定义主题及点位图片
HTMl
<baidu-map
:center="center"
:zoom="zoom"
class="baidu-map"
:map-click="false"
@ready="handler"
>
<bm-info-window
:position="infoWindow.point"
:title="infoWindow.title"
:show="infoWindow.show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<div class="mapCongtent">
00000000
</div>
</bm-info-window>
</baidu-map>
// 地图z主题
getCarItem() {
var carPoint = [
{ carNo: 'cscs', lng: 117.372668, lat: 31.835662 },
{ carNo: '测试1212', lng: 117.435334, lat: 31.858483 },
{ carNo: '随山到水源', lng: 117.505618, lat: 31.818972 },
{ carNo: '阿斯顿法师1', lng: 117.509642, lat: 31.818727 }
]
return carPoint
},
handler({ BMap, map }) {
// const mapStyle = {
// features: ['road', 'building', 'water', 'land'], // 隐藏地图上的"poi",
// style: 'midnight' // 主题
// }
map.setMapStyle({ styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#044161'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#091934'
}
}, {
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#064f85'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'geometry',
'stylers': {
'color': '#004981'
}
}, {
'featureType': 'highway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#005b96',
'lightness': 1
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#004981',
'lightness': -39
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#00508b'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'color': '#056197',
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'geometry.fill',
'stylers': {
'color': '#029fd4'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#1a5787'
}
}, {
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'poi',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#ffffff'
}
}, {
'featureType': 'poi',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#1e1c1c'
}
}, {
'featureType': 'administrative',
'elementType': 'labels',
'stylers': {
'visibility': 'on'
}
}, {
'featureType': 'road',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}] })
map.centerAndZoom(new BMap.Point(117.33153868, 31.85383672), 12) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
var carPoint = this.getCarItem()
for (var i = 0; i < carPoint.length; i++) {
// 画点
const lng = parseFloat(carPoint[i].lng)
const lat = parseFloat(carPoint[i].lat)
var point1 = new BMap.Point(lng, lat)
var myIcon = new BMap.Icon(off, new BMap.Size(34, 34))
var marker = new BMap.Marker(point1, { icon: myIcon }) // 创建标注
var label = new BMap.Label(carPoint[i].carNo, {
offset: new BMap.Size(25, -10)
})
// label.addEventListener("click", fun);
marker.setLabel(label)
map.addOverlay(marker)
}
},
