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 屬性來設置錨點方位，特此記錄。