自定义百度地图样式

项目需求要把地图做成符合页面整体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",
            },
          },
        ],
      });


完结,嘻嘻~~

posted @ 2022-02-16 13:50  光影易逝  阅读(748)  评论(0编辑  收藏  举报