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.下列是引入过高德地图的示例

代码如下（示例）：