Vue2使用高德地图实现标点

1、下包

npm i @amap/amap-jsapi-loader

2、引入高德key和秘钥

window._AMapSecurityConfig = {
  securityJsCode: "秘钥",
};
import AMapLoader from "@amap/amap-jsapi-loader";

3、标签

<div id="container"></div>

4、代码区域：

data() {
    return {
      map: null, //初始化 map 对象
      markers: [], // 存储标点
      infoWindowData: [//数据可自行修改
        {
          lng: 116.39,
          lat: 39.92,
        },
        { 
          lng: 116.42,
          lat: 39.92 
        },
        {
          lng: 116.41,
          lat: 39.91,
        },
        {
          lng: 116.42,
          lat: 39.91,
        },
        {
          lng: 116.42,
          lat: 39.91,
        },
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图，画地图
    initMap() {
      const MAP_PLUGINS = ["AMap.Marker"];
      AMapLoader.load({
        key: "高德申请的key",
        version: "2.0",
        plugins: MAP_PLUGINS,
      })
        .then((AMap) => {
          const map = new AMap.Map("container", {
            viewMode: "3D", //是否为3D地图模式
            terrain: true,
            zoom: 13,
            center: [116.42, 39.91],
          });
          this.map = map;
          // 创建点标点
          this.createMarkers();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 创建点标点
    createMarkers() {
      const markers = [];
      console.log(this.infoWindowData);
      for (let i = 0; i < this.infoWindowData.length; i++) {
        const positions = [
          this.infoWindowData[i].lng,
          this.infoWindowData[i].lat,
        ];
        const icon = new AMap.Icon({
          size: new AMap.Size(20, 30), // 设置图标的宽度和高度
          imageSize: new AMap.Size(20, 30), // 设置图标显示时的大小
          image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png", // 自定义图标的 URL
        });
        const marker = new AMap.Marker({
          position: positions,
          map: this.map,
          icon: icon,
        });
        markers.push(marker);
      }
      this.markers = markers;
      // 缩放地图到合适的视野级别
      this.map.setFitView();
    },
  },

4、效果如下：