vue中使用高德地图 (亲测好用!)

最新推荐文章于 2025-07-16 12:59:52 发布

可可克星

最新推荐文章于 2025-07-16 12:59:52 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

原文链接：https://blog.csdn.net/qq_42043377/article/details/93725143

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Vue项目中通过异步方式加载高德地图API，避免首屏加载时间过长，同时提供了一个实用的加载脚本示例。通过在plugins目录下创建amap.js文件并编写异步加载函数，可以实现地图组件按需加载。

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

在网上找了好久,虽然说方法都大致相同,但只有这个在最新的vue中直接复制进去就可以用了,写的很清楚,感谢作者!

问题来源

项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图

开始

在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件


/*
 * 异步创建script标签 
 */
export default function MapLoader (key) { 
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=' + key
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}


<template>
  <div class="test">
    <div id="container" style="height:300px;width:300px;"></div>
  </div>
</template>
<script>
import MapLoader from '@/plugins/amap.js'
export default {
  name: 'test',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map("container", {
        resizeEnable: true
      });
    }, e => {
      console.log('地图加载失败' ,e)
    })
  }
}
</script>

在项目中使用

还是使用我们上一个项目，那个MintUI的，不是有一个附近的板块么，我们就用这个
cd到项目目录
安装Vue-amap

# cnpm install vue-amap --save

安装成功

在main.js引入


import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
    key: 'XXXXX',//刚刚开发者申请哪里的key
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});

在Near.vue中调用


<template>
    <div id="near">
      <div id="amap-main">
 
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import { lazyAMapApiLoaderInstance } from 'vue-amap';
  export default{
    name:'near',
    mounted() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map('amap-main', {center: new AMap.LngLat(121.59996, 31.197646)});
      });
    }
  }
</script>
<style lang="stylus">
  #near
    #amap-main
      height 300px
</style>