Vue组件篇——Vue3.0中使用高德地图

VUE-CLI 3.0 中配置高德地图

在项目开发中，地图组件

1、首先，需要注册高德开放平台的账号，并在【应用管理】页面【创建新应用】，为应用添加Key值

高德开放平台：https://lbs.amap.com/

 

2、在Vue-Cli中public下的index.html加入script 标签

 

 

 

3、在vue.config.js文件中配置externals

VUE-CLI 3.0 不会自动创建vue.config.js，需要手动创建，同时vue.config.js 不会触发热加载，修改之后需要重新执行npm run serve

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}

 

 

 

4、封装作为组件使用

在src/component建立子组件，建立一个div 盒子，用于地图容器，设定id，之后通过AMap.map()函数建立新地图

 

 

5、在pages页面下新建组件，并复用地图组件 

 

 6、最终效果图