前端vue如何使用高德地图

首先，注册Key

　1、注册开发者账号，成为高德开放平台开发者

    2、登陆之后，在进入「应用管理」 页面「创建新应用」

　3、为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

然后，书写代码

   在vuecli  public文件夹中的index.html添加导入 JS API 的入口脚本标签

在vue.config.js中修改配置

module.exports = {
  publicPath: "./",
  configureWebpack: {
    externals: {
      AMap: 'window.AMap',
      AMapUI: 'window.AMapUI' // 高德地图配置
    },
  }
};

接下来，正式书写vue组件

废话不多说，直接上代码

页面效果如下

以上就是前端vue如何使用高德地图的详细内容，更多关于vue 高德地图的资料请关注考高分网其它相关文章！