如何判断元素在可视区域内

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何判断元素在可视区域内相关的知识,希望对你有一定的参考价值。

参考技术A 前端 通常在处理瀑布流,或者懒加载等情况时 需要判断元素是否在用户的可视区域。

其实有一个非常简单的方法 就能够解决这类的判断问题:

TIP:

document.documentElement在ie7及ie7以下会多出两个像素。因为在ie7及ie7以下的html元素坐标会从(2, 2)开始算起,在ie8已经修复了这个bug。

高德地图判断点的位置是否在浏览器可视区域内

业务场景如下:

1.在地图上点击企业位置mark时,地图不做缩放和移动操作(能点击mark,说明该位置肯定在可视区域内)。

2.点击右侧企业列表的企业时,如果企业的位置不在当前可视区域内,就需要将地图平滑的移动到该企业位置,并且需要缩小地图,先查看到该企业位于哪个区域,再将地图放大到之前缩放的级别。

 

实现思路:

高德地图有几个关系判断的API:判断点是否在线上、点是否在多边形内、面与面的几何关系,可看下方链接示例

https://lbs.amap.com/api/javascript-api/example/relationship-judgment/is-point-on-segment

暂时没有看到有API能直接实现判断点是否在当前地图可视范围内,所以就想的使用判断点是否在多边形内来实现。

1.要使用判断点是否在多边形内来实现,就必须先将当前地图可视范围想象为多边形,获取其四边的路径位置,因为界面是方形的,所以只需要获取四个点的位置即可。

2.高德地图提供啦获取当前可是范围的bounds API,map.getBounds(),可以获取到东北角和西南角的坐标位置。

3.通过东北角和西南角的坐标再去获取到东南角和西北角的坐标位置,就有啦四个点的位置。

4.通过API  AMap.GeometryUtil.isPointInRing(point, path)判断是否在这四个点组成的面内。

注:path里坐标位置的先后顺序很重要。


实现方法:

creatEnterpriseDetailMark (markerColor, options) {
  const bounds = this.Map.getBounds();

  const NorthEast = bounds.getNorthEast();
  const SouthWest = bounds.getSouthWest();
  const SouthEast = [NorthEast.lng, SouthWest.lat];
  const NorthWest = [SouthWest.lng, NorthEast.lat];
  const path = [[NorthEast.lng, NorthEast.lat], SouthEast, [SouthWest.lng, SouthWest.lat], NorthWest]; // 将地图可视区域四个角位置按照顺序放入path,用于判断point是否在可视区域
  const isPointInRing = AMap.GeometryUtil.isPointInRing(options.position, path); // 判断point是否在可视区域
  let zoom;
  this.Map.remove(this.areaMarks);

  const icon = markerColor ? markerColor : ‘#4fd0f7‘;
  if (!options.position) {
    return;
  }
  // this.Map.setZoom(11);
  // this.Map.panTo(options.position);

  const enterpriseMarker = new AMap.CircleMarker({ // 绘制企业位置mark
    map: this.Map,
    center: options.position,
    radius: 8,
    strokeColor: ‘white‘,
    strokeWeight: 2,
    strokeOpacity: 0.5,
    fillColor: icon,
    fillOpacity: 1,
    zIndex: 10,
    bubble: true,
    cursor: ‘pointer‘,
    clickable: true,
    extData: {
      id: options.id,
      name: options.name,
      position: options.position
    }
  });
  const changeZoom = () => {
    this.Map.setZoomAndCenter(zoom, options.position);
    this.Map.off(‘zoomend‘, changeZoom); // 移除zoomend事件绑定 https://lbs.amap.com/api/javascript-api/reference/event
  };
  if (!isPointInRing) {
    zoom = this.Map.getZoom(); // 保存当前的缩放级别,用于后面恢复
    // this.Map.setFitView();
    this.Map.setZoom(10);
    this.Map.on(‘zoomend‘, changeZoom);
  }
  this.areaMarks.push(enterpriseMarker);
}

 


以上是关于如何判断元素在可视区域内的主要内容,如果未能解决你的问题,请参考以下文章

原生js如何判断元素出现在可视区

原生js如何判断元素出现在可视区

jquery判断元素是否出现在可视区

jquery判断iframe元素是不是在可视范围如果不是则滑动到可视区域

如何用jquery判断元素是不是进入可视区域

javascript判断某种元素是否进入可视区域