在Vue2里面加载AntvL7

最新推荐文章于 2025-06-05 09:09:29 发布

在努力的前端小白

最新推荐文章于 2025-06-05 09:09:29 发布

阅读量760

点赞数 3

CC 4.0 BY-SA版权

文章标签： swift 开发语言 ios

本文链接：https://blog.csdn.net/m0_57731044/article/details/137338047

本文介绍了如何在Vue.js项目中嵌入高德地图API，创建了一个地图组件并添加了点标记。展示了如何在`mounted`生命周期钩子中加载地图，并在方法中处理地图实例和标记的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>