Vue，H5高德地图组件

最新推荐文章于 2025-06-28 17:59:59 发布

瘦瘦瘦大人

最新推荐文章于 2025-06-28 17:59:59 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE H5 文章标签： html5 es6 javascript vue

本文链接：https://blog.csdn.net/qq_37380802/article/details/110732217

本文介绍在Vue项目中如何实现H5页面动态异步加载高德地图，通过创建script标签来引入地图API，确保在需要时加载地图资源。

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

H5加载高德地图时候异步创建script标签


<script>
import MapLoader from '@/utils/AMap.js'
export default {
  props: {
    searchKey: {
      type: String,
      default: ""
    }
  },
  watch: {
    searchKey: {
      handler: function (val) {
        this.$nextTick(() => {
          this.searchByHand();
        });
      },
      deep: true
    },
    markers: function (val) {
      // this.$emit('sendCoordinate', this.markers[0].position)
    },
  },
  beforeMount() {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map("amap-box", {
        resizeEnable: true,
        center: [121.329402, 31.228667],
        zoom: 11,
      });
    }, e => {
      console.log('地图加载失败', e)
    })
  },

  data() {
    let self = this;
    return {
      address: null,
      markers: [],
      searchOption: {
        city: "全国",
        citylimit: true
      },
      center: [121.329