闲聊

废话不多说先上效果图，不过不要嫌弃小颖写的自定义弹窗丑，后期项目中肯定不是这么丑的，只能为了先实现功能，简单写了下哈哈哈···········

效果图

怎么实现呢?请往下看

1.设置地图撑满，并在其外增编写所需自定义窗体

相应的css

  .main-conter {
    height: 100%;
  }

2.所需数据集：

  data() {
    return {
      gaodeMap: null,
      markerData: [
        {
          title: '坐标1',
          icon: icon1, //点标记图片路径
          position: [107.159174, 35.70754],
        },
        {
          title: '坐标2',
          icon: icon2, //点标记图片路径
          position: [107.241915, 35.709631],
        }
      ],
      infoWindowData: {
        title: '',
      }
    }
  },

3.在 script 下引入所需图标

import icon1 from '../assets/icon/u294.png';
import icon2 from '../assets/icon/u296.png';

4.打点、设置自定义窗体等相关方法

  methods: {
    // 绘制甘肃省庆阳市镇原县地图
    initGaoDeMap() {
      // let _shuiMapJson = require("./621027_shui.geo.json");
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: 'xxx' // 密钥 
      }
      AMapLoader.load({
        key: 'xxx', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: ['AMap.DistrictSearch'],
      }).then((AMap) => {
        var opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'district',
          // level: 'city'
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        var district = new AMap.DistrictSearch(opts);
        district.search('镇原县', (status, result) => {
          if (status === 'complete') {
            var bounds = result.districtList[0].boundaries;
            var mask = []
            for (var i = 0; i < bounds.length; i += 1) {
              mask.push([bounds[i]])
            }
            this.gaodeMap = new AMap.Map('gaodeMap', {
              mask: mask,
              center: [106.967048, 35.877142],
              viewMode: '3D',
              labelzIndex: 130,
              pitch: 40,
              zoom: 10,
              zooms: [9, 15],//地图显示的缩放级别范围, 默认为 [2, 20] ，
              // rotation: 20,//初始地图顺时针旋转的角度
              // mapStyle: 'amap://styles/dark'
            });
            //添加描边
            for (var j = 0; j < bounds.length; j += 1) {
              new AMap.Polyline({
                path: bounds[j],
                strokeColor: '#ffffff',
                strokeWeight: 4,
                map: this.gaodeMap
              })
            }
            this.addMarker();
          }
        });
      });
    },
    //2.添加点标记
    addMarker() {
      let arr = []
      this.markerData.forEach((item) => {
        let marker = new AMap.Marker({
          map: this.gaodeMap,
          icon: item.icon, //点标记图片路径
          position: item.position, //位置
        });
        arr.push(
          Object.assign(item, { mapId: marker._amap_id })
        );
        // 点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
        AMap.Event.addListener(marker, 'click', (e) => {
          // console.log(e.target._position);
          this.createInfoWindow(marker, arr);
        });
      });
    },
    //4.构建自定义窗体并打开
    createInfoWindow(marker, arr) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id)
      this.infoWindowData = arrNew && arrNew[0];
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs.chuangti,
        offset: new AMap.Pixel(16, -45)
      });
      infoWindow.open(this.gaodeMap, marker.getPosition());
    },
    //关闭窗体
    closeInfoWindow() {
      this.gaodeMap.clearInfoWindow()
    },
  }