自定义百度地图样式

项目需求要把地图做成符合页面整体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 @   光影易逝  阅读(799)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示