自定义百度地图样式

最新推荐文章于 2023-05-25 09:03:27 发布

原创

最新推荐文章于 2023-05-25 09:03:27 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#百度

本文介绍了如何根据项目UI需求，自定义百度地图的样式，通过调整颜色、元素等实现地图与页面风格的统一。附带实际操作代码示例。

项目需求要把地图做成符合页面整体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:

最低0.47元/天解锁文章