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

业务场景以下：

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); }

 

原文出处：https://www.cnblogs.com/amor17/p/10396673.html