vue-amap-marker相关问题，信息窗体及自定义图片的偏移问题

　　vue-amap所引用的地图组件为高德地图组件，相关事件及属性也大都可以在高德地图的原生文档中找到实例。

　　首先，在查文档的时候发现坐标点属性为marker，相关的各种属性都可以直接在marker这个对象里添加，再绑定事件的时候遇到了一个问题，就是文档上的点击事件（由events触发）都是在el-amap-marker标签里绑定的，然而我接到手里的项目中，events绑定在了el-amap里面，然后我在对照其他项目的时候发现只有自己接受的项目里是绑定在“错误”的位置。但是又不能删掉，因为这里确定了坐标中心等一系列内容。在经过查询文档无果后，通过部门前辈得知绑定在外面的events事件不会与marker里的冲突。

页面部分：

  <el-amap
        vid="amap"
        :events="events"
        :center="center"
        :zoom="zoom"
        viewMode="3D"
        :amap-manager="amapManager"
        map-style="amap://styles/fresh"
      >
        <el-amap-marker
          v-for="(marker, index) in mapData"
          :key="'marker' + index"
          :position="marker.position"
          :title="marker.text"
          :icon="marker.icon"
          :offset="marker.offset"

　　　　　　:label="marker.label"// marker的label标签

          :events="marker.events"  //通过事件来显示对应的信息窗体
        >
        </el-amap-marker>
        <el-amap-info-window
          v-if="poiInfoWindow"
          isCustom="true"
          :position="poiInfoWindow.position"
          :visible="poiInfoWindow.visible"
          :offset="poiInfoWindow.offset"
        >
          <div class="slot-info-window scale" @click="closePoiwindow">
            <div class="info-title">
              {{ poiInfoWindow.title}}
            </div>
            <div class="info-content scale">
              <p>11111：<span>{{ poiInfoWindow.value }}</span></p>
              <p>22222：<span>{{poiInfoWindow.ratio}}</span></p>
            </div>
          </div> //自定义的信息窗体的结构和内容样式自行调整
        </el-amap-info-window>
      </el-amap>

js部分：

private poiInfoWindow: any = {

    content: null,

    visible: false,

    offset: [130, 40],

    title: ' 啦啦啦啦啦',

    datas: [{ ratio: 2, value: 10 }],

    position: [1, 1],

  };//此处数据随意填写即可

　　private getMapData() {
    const scenicOptPar = {};
    scenicOpt(scenicOptPar).then((res: any) => {
      if (
        res.status === 200 &&
        res.data &&
        res.data.obj &&
        res.data.obj.length
      ) {
        const data = res.data.obj;
        const marker: any = [];
        data.forEach((v: any, n: number) => {
          v.position = [v.lng, v.lat];
          marker.push({
            id: n,
            position: v.position,
            text: v.name,
            value: v.value,
            ratio: v.ratio,
            content: '',
            icon: 'img/icon.png',//可选可不选，有默认坐标点图案
            offset: [-20, -50],//设置偏移量是因为把坐标点换成自己的图片后会有偏移

　　　　　　　　label: {

　　　　　　　　 offset: [10,10]

              content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容

              direction: 'right' //设置文本标注方位

            },//label标签为一个对象可在内部设置具体内容及样式

           events: {
              click: (e: any) => {
                this.openPoiwindow(e, n);
              },
            },
          });
        });
        this.mapData = marker;
      }
    });
     private openPoiwindow(e: any, n: any) {
    this.mapData.forEach((v: any, idx: number) => {
      this.mapData[
        idx
      ].content = `<i title="${v.text}" class="duoyou-poi-icon"></i>`;//这里的content并无实际意义
      if (v.id === n) {
        this.mapData[idx].content = `<i class="duoyou-poi-icon"></i>`;//同上
        this.poiInfoWindow.visible = true;
        this.poiInfoWindow.title = v.text;
        this.poiInfoWindow.position = v.position;//控制窗体显示在所点击的坐标上
        this.poiInfoWindow.value = v.value;
        this.poiInfoWindow.ratio = (v.ratio * 100).toFixed(2);
      }
    });
  }
}

　　在完成坐标点替换为自定义图标时发现图标位置与原坐标点不符，所以设置了偏移来校准位置，百度得知这个偏移是通病，因为设置完图标，图标的锚点默认在左上角，今天在看高德地图原生文档的时候发现官方给出了一个anchor 属性来设置锚点方位，特此记录。