zoukankan      html  css  js  c++  java
  • 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 属性来设置锚点方位,特此记录。

  • 相关阅读:
    IG GROUP开源RESTdoclet项目
    Visual Studio 2012 Update 1抢先看
    使用 Windows Azure 移动服务将云添加到您的应用
    WMF 3.0 RTM(包含PowerShell 3.0 )业已发布
    Node.js 0.9.2 发布(非稳定版)
    vsftpd 3.0.1 正式版发布
    Piggydb 6.2 发布,个人知识库管理
    Apache Commons Codec 1.7 发布
    Notepad++ 6.1.8 正式版发布
    gWaei 3.6.0 发布,英日词典
  • 原文地址:https://www.cnblogs.com/wanghuanl/p/15157081.html
Copyright © 2011-2022 走看看