自定义百度地图样式
项目需求要把地图做成符合页面整体UI的样式,效果图如下:
话不多说贴代码
// 自定义主题
map.setMapStyle({
styleJson: [
{
featureType: "water",
elementType: "all",
stylers: {
color: "#102d68",
},
},
{
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: "#102f6d",
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: {
color: "#0e9cd2",
"font-weight": "bold",
visibility: "on",
},
},
{
featureType: "administrative", // 村名
elementType: "labels",
stylers: {
visibility: "on",
},
},
{
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: {
color: "#0e9cd200",
weight: 0,
},
},
{
featureType: "road", // 路名
elementType: "labels",
stylers: {
visibility: "off",
},
},
],
});
完结,嘻嘻~~