vue2项目中使用高德地图

1.下载依赖

npm i @amap/amap-jsapi-loader

2.使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getDevicePosition } from "@/api/cockpit/cockpit";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "xxxx", // 自己申请的key
};
export default {
  data() {
    return {
      map: null,
      // 标记点的数据
      deviceList: [],
    };
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "40849e82b4e33f5255b17372520c954d", // 后期需替换
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("map", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center:[116.4, 39.9], // 中心点坐标
            resizeEnable: true,
          });
          this.marker();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 标记点
    marker() {
      // 循环所有的标记点
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].lon && this.deviceList[i].lat) {
          let content = '<div class="circle-container"><div class="circle-one"></div><div class="circle-two"></div><div class="circle-three"></div><div class="circle-four"></div></div>'
          let marker = new AMap.Marker({
            position: [
              Number(this.deviceList[i].lon),
              Number(this.deviceList[i].lat),
            ], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            map: this.map,
            title: this.deviceList[i].deviceName,
            content:content,
            offset: new AMap.Pixel(0, 0),
          });

          // 信息窗体
          this.infoWindow = new AMap.InfoWindow({
            isCustom: true, // 自定义信息窗体
            content: this.$refs.windowInfo.$el, //窗体内容(vue组件)
            offset: new AMap.Pixel(9, -5) // 偏移
          });

          marker.on("click", (e) => {
            // 打开信息窗口
            this.infoWindow.open(this.map, e.lnglat);
            // 初始化信息窗口
            this.$refs.windowInfo.initialize({
              overlay: e.target,
              infoWindow: this.infoWindow,
              device: this.deviceList[i]
            });
          });
          // 将创建的点标记添加到已有的地图实例：
          this.map.add([marker]);

        }
      }
    },
    // 获取坐标数据
    fetchPositionData() {
      getDevicePosition()
        .then((res) => {
          this.deviceList = res.data;
          // 初始化地图
          this.initMap();
        })
        .catch(() => {
          this.initMap();
        });
    },
  },
  created() {
    this.fetchPositionData();
  },
};
</script>
 
<style scoped>
#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>
<style lang="scss" >
.circle-container {
  position: absolute;
  width: 30px;
  height: 30px;
}

.circle-one,
.circle-two,
.circle-three,
.circle-four {
  width: 0px;
  height: 0px;
  background-color: transparent;
  border: 4px solid rgb(46, 130, 232);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circle-one {
  animation: transition-circle 2s infinite;
}

.circle-two {
  animation: transition-circle 2s infinite 1s;
}

.circle-three {
  animation: transition-circle 2s infinite 1.5s;
}

.circle-three {
  animation: transition-circle 2s infinite 2.5s;
}

@keyframes transition-circle {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  100% {
    width: 35px;
    height: 35px;
    opacity: 0;
  }
}
</style>