vue高德地图，将背景设置为透明

vue高德地图，需求将当前高德地图图层改为透明的(与网页背景融合为一体)，陆地板块不收到影响，使用的是高德地图的简易行政地图

• 这篇文章讲的很详细，请看：1.vue中使用高德地图定位
• 除此之外, 这篇博客: vue高德地图绘制遮罩中的 2.初始化高德地图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 新来的小伙伴可以参照我的另一篇博客初始化你的高德地图在这里不在赘述，链接如下：
  https://blog.csdn.net/pizixian_/article/details/122853901?spm=1001.2014.3001.5502

要将当前高德地图的图层改为透明的，可以使用高德地图 JavaScript API 提供的 setMapStyle 方法，将地图的样式设置为透明的。具体步骤如下：

1. 在 Vue 项目的 public/index.html 文件中引入高德地图 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

请将 YOUR_API_KEY 替换为自己的高德地图 API Key。

2. 在 Vue 组件中创建地图实例，并设置地图样式：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 创建地图实例
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923],
    });

    // 设置地图样式
    map.setMapStyle('amap://styles/5e671d6c188d6b3f6d55bea2c0b89fbd');

    // 其他代码
  },
};
</script>

<style>
#map-container {
  width: 100%;
  height: 100vh;
}
</style>

在上述代码中，我们创建了一个地图实例，并在 mounted 钩子函数中将地图样式设置为透明的。这里使用的是高德地图 JavaScript API 提供的简易行政地图样式，您也可以根据自己的需求选择其他样式。

需要注意的是，设置地图样式需要在地图实例创建后才能进行，因此需要将设置地图样式的代码放在创建地图实例的回调函数中。另外，为了让地图占满整个屏幕，我在样式中设置了 height: 100vh。