vue中调用高德地图的api

Question

我在调高德地图api时，显示的是空白

<template>
  <div id="container"></div>
</template>
<script>
  import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: "Mapvieww",
    mounted() {
      this.initAMap();
    },
    unmounted() {
      if (this.map) {
        this.map.destroy();
      }
    },
    methods: {
      initAMap() {
        AMapLoader.load({
          key: "2a28c96407ff8b9dbad796dee0ad0fe4", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [116.397428, 39.90923], // 初始化地图中心点位置
            });
          })
          .catch((e) => {
            console.log(e);
          });
      },
    },
  };
</script>
<style scoped>
  #container {
    width: 500px;
    height: 500px;
  }
</style>

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述：在调用高德地图API时，显示的是空白页面。 问题分析：

1. 检查开发者Key是否正确，如果Key有误或者未经过审核，会导致地图无法加载。建议确认Key是否正确以及审核是否通过。
2. 检查地图容器是否设置正确，需要指定容器的宽高并且确保容器存在于DOM中。可以检查HTML代码和CSS样式中是否正确指定了容器的宽高和位置。
3. 检查引用的API库版本是否正确，可以尝试更换版本号或者删除plugins选项。
4. 检查网络连接是否正常，如果网络不稳定或者网络连接异常，会导致地图无法正常加载。
5. 检查代码逻辑是否正确，比如函数调用是否正确、参数是否正确等。可以尝试断点进行调试。 案例和代码： 下面是一个简单的示例代码，可以用来检查地图容器是否正确设置：

<template>
  <div id="container"></div>
</template>
<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
  
  export default {
    mounted() {
      this.initAMap();
    },
    methods: {
      initAMap() {
        AMapLoader.load({
          key: '2a28c96407ff8b9dbad796dee0ad0fe4',
          version: '2.0',
          plugins: ['AMap.Scale'],
        }).then((AMap) => {
          this.map = new AMap.Map('container', {
            viewMode: '3D',
            zoom: 11,
            center: [116.397428, 39.90923],
          });
        }).catch((e) => {
          console.log(e);
        });
      },
    },
  };
</script>
<style scoped>
    #container {
      width: 500px;
      height: 500px;
    }
</style>

在该代码中，我们指定了地图容器的id为container，并在样式中为该容器指定了宽高。在initAMap函数中，我们使用了高德JSAPI Loader来加载API库，并在加载完成后创建了一个地图实例。如果上述问题中的解决方案都无法解决该问题，可以参考上述示例代码进行调试。