【高德】改变地图的背景色为自定义样式

最新推荐文章于 2024-06-22 13:35:26 发布

哇哦Q

最新推荐文章于 2024-06-22 13:35:26 发布

阅读量5.3k

点赞数 1

分类专栏： ECharts+高德地图文章标签： html 前端

本文链接：https://blog.csdn.net/Qxn530/article/details/127850487

版权

ECharts+高德地图专栏收录该内容

5 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何创建自定义地图，包括选择模板、修改地图样式，特别是将地图背景色设置为透明。通过使用高德地图API，创建了一个具有特定颜色风格的省界线，并展示了在Vue项目中集成地图的代码示例。此外，还提供了封装的MapLoader方法来加载地图库。

摘要由CSDN通过智能技术生成

也就是说，地图的背景色是透明的，然后放地图的盒子有背景色，或者放图片

第一步：创建自定义地图

模板的话就自己随便选择一个就行

第二步：修改样式

如果对于省界线需要改变颜色的，也可以进行更改

第三步：代码

public》index.html（记得该你的key）

 <script
    src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>

  <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>

页面（记得改你的key和秘钥）

<template>
  <div id="dashboard" class="dashboard-container">
      <div class="dian">
        <div id="ditu" class="dituBox"></div>
      </div>
  </div>
</template>
<script type="text/javascript">
window._AMapSecurityConfig = {
  securityJsCode: "95dcc8d3a56f8e0f6804bfdf8f8aaa21",
};
</script>
<script>
import { mapGetters } from "vuex";
import MapLoader from "@/filters/AMap";
let map;
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },

  data () {
    return {
     
    };
  },
  created () {
    MapLoader().then(() => {
      this.initmap("中华人民共和国"); //海量点
    });
  },
  methods: {
    initmap (city) {
      //密钥
      window._AMapSecurityConfig = {
        securityJsCode: "4dbb42c683243ff4538d3e9689abf102",
      };
      var disCountry = new AMap.DistrictLayer.Country({
        // zIndex: 10,
        // SOC: "CHN",
        // depth: 1,
        styles: {
          // "nation - stroke": "#fff",
          // "coastline - stroke": "#fff",
          // "province - stroke": "#fff",
          "fill": function (props) {
            // return 'rgba(255, 255, 255, 0.9)'
            return 'rgba(0,0,0, 0)' //修改地图的颜色为透明色
          }
        }

      })
      // 创建地图
      map = new AMap.Map("ditu", {
        layers: [disCountry],
        zoom: 4,
        zooms: [4, 10],
        center: [104.884436, 33.915085],
        resizeEnable: true,
        showIndoorMap: false,
        mapStyle: "amap://styles/183d28f9e6ad5076bc7c4924ac9c606f",
        features: ["point", "road", "bg"], //地图要素
        viewMode: "2D",
        pitch: 45,
        zoomEnable: true,
      });

      // map.addControl(new AMap.Scale());
      // map.addControl(new AMap.ToolBar({ liteStyle: true }));
      // map.on('complete', function () {
      //   var layer = new AMap.LabelsLayer({
      //     // 开启标注避让，默认为开启，v1.4.15 新增属性
      //     collision: false,
      //     // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      //     animation: true,
      //   });
      //   for (var i = 0; i < LabelsData.length; i++) {
      //     var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
      //     layer.add(labelsMarker);
      //   }
      //   map.add(layer);
      // })
    },
  }
}
</script>

<style lang="scss" scoped>
.dian {
  // background-image: url('../../assets/404_images/404.png');
  background-color: aquamarine;
  .dituBox {
    width: 80%;
    height: 1000px;
    background-color: transparent !important;
  }
}
</style>

封装MapLoader 方法（记得改你的key）

// AMap.js
// 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
export default function MapLoader () {
    return new Promise((resolve, reject) => {
        if (window.AMap) {
            resolve(window.AMap)
        } else {
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = 'https://webapi.amap.com/maps?v=2.0&callback=initAMap&key=你的key'
            script.onerror = reject
            document.head.appendChild(script)
        }
        window.initAMap = () => {
            resolve(window.AMap)
        }
    })
}