1.安装高德依赖
这是一套专门用于vue的高德地图插件，在项目目录下打开入
npm i @amap/amap-jsapi-loader --save
然后我们可以在package.json里面看到这样一行代码这就代表安装成功
2.在需要的页面引入该依赖
引入方法如下：
import AMapLoader from "@amap/amap-jsapi-loader";//按需引入依赖 window._AMapSecurityConfig = { securityJsCode: "在这里添加你的安全密钥", //安全密钥 };
3.初始化地图
代码如下：
AMapLoader.load({ key: "填写对应的key值", //key值是key值 和安全密钥不同 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then((AMap) => { // 初始化地图 this.map = new AMap.Map("container", { viewMode: "2D", // 是否为3D地图模式 zoom: 15, // 初始化地图级别 center: [113.425981, 35.423209], //中心点坐标 resizeEnable: true, }); }) .catch((e) => { console.log(e); });
4.下列是引入过高德地图的示例
代码如下（示例）：
<template> <div id="container" class="map"></div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; // 设置安全密钥 window._AMapSecurityConfig = { securityJsCode: "安全密钥", }; export default { data() { return { map: null, }; }, created() { // 高德地图 this.GaodeMap(); }, methods: { GaodeMap() { AMapLoader.load({ key: "填入对应的key值", //key值是key值 和安全密钥不同 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }) .then((AMap) => { // 初始化地图 this.map = new AMap.Map("container", { viewMode: "2D", // 是否为3D地图模式 zoom: 15, // 初始化地图级别 center: [113.425981, 35.423209], //中心点坐标 resizeEnable: true, }); }) .catch((e) => { console.log(e); }); }, }, }; </script> <style> .map { overflow: hidden; width: 100%; height: 800px; margin: 0; font-family: "微软雅黑"; } .amap-copyright { display: none !important; } .amap-logo { display: none !important; } </style>
