1.前期配置

高德官网：入门教程

2.封装通用map

export default function (id) {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '0aa1aa70d4372bef796faf43db1fd59f', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // plugins: ['AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
    })
      .then((AMap) => {
        const map = new AMap.Map(id)
        // 设置主题色 grey darkblue dark blue
        // map.setMapStyle('amap://styles/cc7192e6f21b12d9dc53defc14f16a05')
        // fresh whitesmoke macaron graffiti blue dark darkblue
        map.setMapStyle('amap://styles/blue')
        // 添加工具条
        // map.addControl(
        //   new AMap.ToolBar({
        //     liteStyle: false,
        //     position: {
        //       bottom: rr(30),
        //       left: rr(20),
        //     },
        //   })
        // )
        // 使用CSS默认样式定义地图上的鼠标样式
        // map.setDefaultCursor('pointer')
        resolve(map)
      })
      .catch((e) => {
        reject(e)
      })
  })
}

3.绘制行政区边界图层

// 绘制行政区域
export function drawDistrictBoundaries(districtName, map) {
  // 获取边界坐标点
  map.plugin('AMap.DistrictSearch', () => {
    const districtSearch = new AMap.DistrictSearch({
      // 关键字对应的行政区级别，共有5种级别
      level: 'district',
      // 是否显示下级行政区级数，1表示返回下一级行政区
      subdistrict: 0,
      // 返回行政区边界坐标点
      extensions: 'all',
    })
    // 搜索所有省/直辖市信息
    districtSearch.search(districtName, (status, result) => {
      // 查询成功时，result即为对应的行政区信息
      // 反向设置图层，将行政区外的区域添加遮罩
      var outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true),
      ]
      var pathArray = [outer]
      let bounds = result.districtList[0].boundaries
      pathArray.push.apply(pathArray, bounds)
      var polygon = new AMap.Polygon({
        pathL: pathArray,
        //线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeColor: 'rgba(66, 235, 252, 1)',
        strokeWeight: 4,
        //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeOpacity: 1,
        //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
        fillColor: 'rgba(0,0,0)',
        //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        fillOpacity: 0.5,
        //轮廓线样式，实线:solid，虚线:dashed
        // strokeStyle: 'dashed',
        /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
          ie9+浏览器有效 取值： 
          实线：[0,0,0] 
          虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
          点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
          线和10个像素的空白 （如此反复）组成的虚线*/
        strokeDasharray: [10, 2, 10],
      })
      polygon.setPath(pathArray)
      map.add(polygon)
      // if (bounds) {
      //   for (let i = 0, l = bounds.length; i < l; i++) {
      //     // 生成行政区划polygon
      //     let polygon = new AMap.Polygon({
      //       map: map, // 指定地图对象
      //       strokeWeight: 2, // 轮廓线宽度
      //       path: bounds[i], // 轮廓线的节点坐标数组
      //       fillOpacity: 0.5, // 透明度
      //       strokeColor: 'rgba(66, 235, 252, 1)', // 线条颜色
      //       strokeStyle: 'solid',
      //       bubble: true,
      //       fillColor: '#eeeeee',
      //     })
      //     polygon.on('click', () => {
      //       // 点击绘制的区域时执行其他交互
      //     })
      //   }
      //   // 地图自适应
      //   // this.map.setFitView()
      // }
    })
  })
}

4.组件层级初始化地图

async initMap() {
  const map = await loadAmap('appMap') // loadAmap为引入封装好的map
  this.map = map
  map.setZoomAndCenter(10.4, [119.933382, 36.26468]) // 设置地图中心点位，及缩放层级
  map.on('complete', () => {
    this.$refs.appMap.style.visibility = 'visible'
  })
  // TileLayer的参数有 Traffic RoadNet Satellite
  // 设置地图的图层样式，有标准，卫星
  this.trafficLayer = new AMap.TileLayer.Traffic({
    zIndex: 10,
  })
  // 添加地图街道路点位背景建筑等信息
  map.setFeatures(['road', 'point', 'bg', 'building'])
  map.add(this.trafficLayer) //添加图层到地图
  // 地图缩放级别，触发相应方法
  map.on('zoomend', () => {
    // 地图缩放时可以控制显示在地图上的遮罩
    const zoom = this.map.getZoom()
    this.func(zoom)
  })
},

5.添加图层

// 添加改造小区总数量图层
    renderClusterMarker() {
      let mark = []
      const marker = new AMap.Marker({
        // 设置marker图层坐标点位
        position: ['119.993382', '36.25468'],
        // 点位遮罩具体显示
        content: `<div class="xxxx">${xxx}</div>`,
        // 点位偏移量
        offset: new AMap.Pixel(-20, -50),
      })
      mark.push(marker)
      this.map.add(marker)
      // 将mark 绑定到 this 可以通过map.remove()来操作删除图层
      this.markList = mark
    },