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.15plugins: [], // 需要使用的的插件列表，如比例尺'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.15plugins: [], // 需要使用的的插件列表，如比例尺'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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。