vue总结之vue引入高德地图

目录

1.安装高德依赖

2.在需要的页面引入该依赖

3.初始化地图

4.下列是引入过高德地图的示例

---

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>