JSAPI 高德地图应用---批量初始化点标记、矢量图形

        在高德地图的应用中，地图上展示我们自己自定义覆盖物是很常见的应用，前提是需要覆盖物相应的定位点以及图标即可，但矢量图形不能直接展示图标，可以在信息框中展示；这里我就弄一个标记点的初始化，并且添加上信息框的展示，其他矢量图形类似：代码如下，

   function init() {
      //initPointList是初始化数据的列表
      if (this.initPointList.length > 0) {
        this.initPointList.map(it => {
           //这里可以根据传入图标名称，在本地进行绘制，需要用require来引入
          const imag = require('@/assets/images/map/' + it.icon  + '.png')
           //这里控制了图标显示的大小
          const size = it.iconSize === 'small' ? 28 : it.iconSize === 'mid' ? 38 : 48
          let position = []
      
          const marker = new AMap.Marker({
            zIndex: 200,
            position: itposition,  // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: it.name,
            extData: {
              id: it.id//添加自定义属性，用于高亮
            },
            icon: new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(size, size),
              // 图标的取图地址
              image: imag,//使用传入的图表标
              // 图标所用图片大小
              imageSize: new AMap.Size(size, size),
              // 图标取图偏移量
              // anchor:'center'
              // imageOffset: new AMap.Pixel(0, 0)

            })
          })
          //鼠标点击marker弹出自定义的信息窗体
         AMap.event.addListener(marker, 'click', () => {
            this.currentMsg = it
            getAllOverlays('marker', it)
          })
          //把每个定位点添加到数据里面，可以批量控制它的显示与隐藏
          this.pointMarkers.push(marker)
        })
        this.map.add(this.pointMarkers)
      }
    }

   // 信息窗口初始化
  function  getAllOverlays (type, item) {
      // 获取当 marker 类型的覆盖物
      const info =createdInfo(item)
      this.pointWindow = new AMap.InfoWindow({
        position: position,
        offset:new AMap.Pixel(-10, -35) ,
        closeWhenClickMap: true,//鼠标点击地图任意位置，信息框消失
        content: info.join(''),
      })

      this.pointWindow.open(this.map)
    },


   // 信息框里展示内容初始化,这里只写一个简单的名称，后续需要可以自己添加
  function  createdInfo(obj){
       const info = []

      info.push(`<p  style='min-width:200px;'  class='input-item'>名称 :${obj.name|| '未知'}</p>`)
      return info
    }

效果如下：