在vue中集成高德地图amap-jsapi-loader

前往高德地图开发平台高德开放平台 | 高德地图API

一：申请高德key 

        去高德官网去创建一个属于自己的地图应用 （得到key和秘钥） 。

        首先，我们要注册一个开发者账号，根据实际情况填写，身份写个人：

        进入我的应用：         ​​​​​         创建新应用

         获取key和密钥

        注意： 2021年12月02日后创建的 key 必须配备安全密钥一起使用

二：在vue中使用高德地图

       这里使用的是amap-jsapi-loader 。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API，并提供了一些方便的配置选项和回调函数，以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库，如React、Vue、Angular等。

        在项目中应用：

        1、控制台安装：

npm i amap-jsapi-loader --save

        2、在main.js中配置秘钥

    //配置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '你的密钥' //*  安全密钥
}

        3、项目中创建MapView.vue文件用作地图组件

        4、在 MapView.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 map；

        5、在地图组件 MapView.vue 中引入 amap-jsapi-loader 

import AMapLoader from '@amap/amap-jsapi-loader';

       6、地图初始化函数 initMap，这里简单实现了marker点标记功能

        看一下效果：