1、代码块

<template>
  <div ref="mapContainer" style="width: 800vh; height: 100vh; align-items: center; justify-content: center"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 引入高德地图的 JavaScript API
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=bacb50ec59a6cb4528f0f2ad6ecc4c54';

      script.onload = () => {
        // 初始化地图
        const map = new window.AMap.Map(this.$refs.mapContainer, {
          zoom: 14,
          center: [121.434765, 31.256735],
        });

        // 添加点标记
        this.addMarker(map);
      };

      script.onerror = () => {
        console.error('加载高德地图API失败');
      };

      document.head.appendChild(script);
    },
    addMarker(map) {
      // 添加一个点标记
      new window.AMap.Marker({
        position: [121.434765, 31.256735],
        map: map,
      });
    },
  },
};
</script>

<style scoped>

</style>

2、加载出来的效果图