vue实现列表定位地图元素，某条数据滚动到可视区（高德地图显示）

vue实现列表定位地图元素，某条数据滚动到可视区（高德地图显示）

功能描述：点击列表某条数据，地图该标点信息框弹出。点击某个标点，列表该数据出现在可视区范围，数据凸显。
列表代码如下：

<div class="inforList">
          <div 
            :ref="activeName===items.venues?'activeNameRef': ''"
            :tabindex="activeName===items.venues? '-1' : ''"
            :class="activeName===items.venues?'inforListC inforListCA':'inforListC'" 
            v-for="(items,keys) in MarkersList" 
            :key="keys" 
            @click="getOneOverlay(items)">
            <img :src="getSrc(items.venuesphoto)" alt="图片" />
            <div>
              <p >{{名称.venues}}</p>
              <p class="inforListP">数量:{{items.equipcount}}</p>
              <p class="inforListP">百分比:{{items.eqstatecount}}%</p>
            </div>
          </div>
        </div>

点击列表某条元素

 // 获取当前 id 的覆盖物
    getOneOverlay(val) {
      this.activeName = val.venues
      let position = [val.x,val.y]

      let infoWindow = new AMap.InfoWindow({
          position: position,
          offset: new AMap.Pixel(0, -35),
          content: `<div style="padding:0 20px;">
            <p style="margin:0;">名称：${val.venues}</p>
            <p style="margin:0;">地：${val.venuesaddress}</p>
            </div>`
      });
      infoWindow.open(this.map);
    },

点击地图标点，列表里面数据可视区

 watch: {
      activeName() {
        this.$nextTick(() => {
          this.$refs.activeNameRef[0].focus();
        });
      }
  }

地图显示代码

MapShow(){
        let that = this
        this.map = new AMap.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 15, //初始地图级别
          center: [114.66885,35.201628], //初始地图中心点
        })
        let map = this.map;
        map.clearMap();  // 清除地图覆盖物
        // this.MarkersList = [
        //   {
        //     x:116.368904,
        //     y:39.923423,
        //     venues: 1,
        //     venuesaddress: '22222'
        //   },
        //   {
        //     x:116.398258,
        //     y:39.914600,
        //     venues: 'dsjf',
        //     venuesaddress: '内心就是'
        //   }
        // ]
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        if(this.MarkersList.length>0){
          this.MarkersList.map(v => {
            var marker = new AMap.Marker({
                  position: [v.x,v.y],
                  map: map,
                  extData:{
                    id: v.venues
                  },
                  offset: new AMap.Pixel(-13, -30)
              });
              marker.content = `<div style="padding:0 20px;">
              <p style="margin:0;">名称：${v.venues}</p>
              <p style="margin:0;">地址：${v.venuesaddress}</p>
              </div>`;
              marker.on('click', function(e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
                that.activeName = e.target.w.extData.i
              })
              marker.setMap(map)
              // 去掉默认信息框
              // marker.emit('click', {target: marker});
          })
          // map.setFitView();
        }
    },

高德地图引入vue 在index.html里面引入

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key="></script>