IT博客汇 | 如何在vue项目中引入高德地图JS API v2.0，快速入门

如何在vue项目中引入高德地图JS API v2.0，快速入门

JayHrn发表于 2023-12-19 09:35:28

相信很多做一些关于运输，物流方面的项目的时候，总会遇到需要使用地图的时候，目前大部分使用的地图是百度地图和高德地图。但是经过我自己使用之后，发现这两者都各有各自的好处。但是对于我来说，我需要获取路线的长度，时间，路费等多方面具体信息，所以更加倾向于使用高德地图，并且高德地图可添加的途径点数目似乎多于百度地图。

下面就是关于如何在vue项目中引入高德地图的步骤。

准备

使用这些提供的API接口，当然都得申请他们的密钥。

首先注册开发者账号，成为高德开发平台开发者，至于具体的注册，大家应该都会，这里我们注册的时候可以直接使用支付宝进行验证，这样子也比较方便快捷。
登录刚刚注册的账号点击左侧菜单栏的【应用管理】下面的【我的应用】，然后点击创建右上角的创建新应用，输入应用名称和应用类型，类型根据自己的项目即可（选什么似乎都没有什么影响），点击新建即可。
为应用添加Key。输入Key名称，选择自己的项目类型，如果我们的是一般的Web项目，选择Web端(JS API)即可。至于域名白名单就根据自己的要求填写就可以，如果没有限制可以不填写。最后点击确定即可。
添加成功后，我们就可以看到我们的Key值了，一个是Key值，一个是安全密钥。

为项目添加Key步骤

注意，如果是在2021年12月02日申请以后的key需要配合您的安全密钥一起使用。

安装

在项目中按照NPM方式进行安装即可。

1	npm i @amap/amap-jsapi-loader --save

引入

在项目中新建一个vue文件，或者在你需要填入地图的组件中创建一个容器用来接收地图，这里我们容器将容器id设定为container，在这里，地图放入的容器需要设置对应容器的id。

1
2
3

<template>
     <div id="container"></div>
</template>

设置容器基本样式，例如尺寸等。

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader
1
import AMapLoader from '@amap/amap-jsapi-loader';

引入地图并初始化，在script标签中引入如下内容。

如下的引入针对的是vue2，官网似乎说了vue3需要其他操作，可以参考JSAPI结合Vue使用-高德地图API

data() {
    return {
      map: null, //地图对象
    }
  },
  mounted() {
    // 初始化申请key对应的秘钥，必须使用，否则无法进行路线规划，当然，官网说2021年12月02日之前的似乎不要
    window._AMapSecurityConfig = {
      securityJsCode: '' // 申请key对应的秘钥
    }
    //DOM初始化完成进行地图初始化
    this.initMap();
  },

  methods: {
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.Driving', 'AMap.AutoComplete'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等，可以引入多个
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:11,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
    }
  }

到这里，我们地图的基本引入使用就完成了。至于一些详细的使用可以参考高德开放平台。