- 漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
- 漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
- 漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
- 漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
- 漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
- 漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
- 漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内(电子围栏)
-
漏刻有时百度地图API实战开发(8):圆形区域周边搜索地图监听事件(覆盖物重叠显示层级\图像标注监听事件、setZIndex和setTop方法)
百度地图JavaScript开源库,是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库,帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。
判断点是否在多边形内,主要使用的GeoUtils类。它提供若干几何算法,用来帮助用户判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。 主入口类是GeoUtils。文章来源:https://www.toymoban.com/news/detail-722369.html
引入JS封装库
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=3HGqGo***"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
构建HTML地图容器
<div style="float:left;width:600px;height:500px;padding: 15px;" id="container"></div>
核心代码
var map = new BMap.Map("container");
var pt = new BMap.Point(116.404, 39.915);
map.centerAndZoom(pt, 16);
map.enableScrollWheelZoom();//开启滚动缩放
//电子围栏
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.394, 39.914);
var pt3 = new BMap.Point(116.403, 39.920);
var pt4 = new BMap.Point(116.402, 39.914);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
var opts = {
fillColor: 'blue',
fillOpacity: 0.3,
strokeColor: 'blue',
strokeStyle: "dashed",
strokeWeight: 1,
strokeOpacity: 0.5
}
var ply = new BMap.Polygon(pts, opts);
map.addOverlay(ply);
//地图监听事件
map.addEventListener('click', function (e) {
var x = e.point.lng;
var y = e.point.lat;
var newPoint = new BMap.Point(x, y);
var mkr = new BMap.Marker(newPoint);
map.addOverlay(mkr);
//判断时间
ptInPolygon(newPoint, ply);
})
var allOverlay = map.getOverlays();
console.log(allOverlay[0]);
//点在多边形内
function ptInPolygon(pt, ply) {
var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
if (result == true) {
$("#control").append("操作在电子围栏内<br>");
} else {
$("#control").append("超出电子围栏<br>");
}
}
封装函数及优化
@漏刻有时文章来源地址https://www.toymoban.com/news/detail-722369.html
到了这里,关于百度地图API:JavaScript开源库几何运算判断点是否在多边形内(电子围栏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!