百度地图js中地理围栏算法bug

最新推荐文章于 2024-07-17 13:49:49 发布

置顶陈十一

最新推荐文章于 2024-07-17 13:49:49 发布

阅读量1.8k

点赞数 2

分类专栏： js 文章标签：百度地图地理围栏 js

本文链接：https://blog.csdn.net/qq_17336873/article/details/80108070

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人近期因为项目需要，尝试把百度的js地理围栏算法改成java实现，测试过程中发现有bug存在，一开始以为是转换过程中出现了问题，后来测试了原生js，发现问题确实存在。此处demo我参照了网上的示例原demo，后来我将测试数据稍微变更便发现了问题。

测试代码：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GeoUtils示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <style type="text/css">
    table {
        font-size: 14px;
    }
    </style>
</head>

<body>
    <div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
    <div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
        <table style="width:100%;">
            <tr>
                <td colspan="2">判断点是否在多边形内:</td>
            </tr>
            <tr>
                <td><input type="button" value="多边形1" οnclick="polygon1()" /></td>
            </tr>
            <tr>
                <td><input type="button" value="多边形2" οnclick="polygon2()" /></td>
            </tr>
            <tr>
                <td>经度<input type="text" value="" id="lng"></td>
            </tr>
            <tr>
                <td>纬度<input type="text" value="" id="lat"></td>
            </tr>
            <tr>
                <td>结果：</td>
            </tr>
            <tr>
                <td><p id="result" style="color:red"></p></td>
            </tr>
        <table>
    </div>
</body>

</html>
<script type="text/javascript">
    var map = new BMap.Map("container");
    var pt = new BMap.Point(116.404, 39.915);
    var mkr = new BMap.Marker(pt);
    var ply;  //多边形
    map.centerAndZoom(pt, 16);
    map.enableScrollWheelZoom(); //开启滚动缩放
    map.enableContinuousZoom(); //开启缩放平滑

    //初始化为多边形1
    polygon1();

    //生成多边形1
    function polygon1() {
        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);
        var pt5 = new BMap.Point(116.410, 39.913);
        pts.push(pt1);
        pts.push(pt2);
        pts.push(pt3);
        pts.push(pt4);
        pts.push(pt5);
        ply = new BMap.Polygon(pts);

        //演示：将面添加到地图上
        map.clearOverlays();
        map.addOverlay(ply);
    }

    //生成多边形2
    function polygon2() {
        var pts = [];
        var pt1 = new BMap.Point(116.395, 39.910);
        var pt2 = new BMap.Point(116.411, 39.910);
        var pt3 = new BMap.Point(116.411, 39.915);
        var pt4 = new BMap.Point(116.416, 39.915);
        var pt5 = new BMap.Point(116.416, 39.920);

        pts.push(pt1);
        pts.push(pt2);
        pts.push(pt3);
        pts.push(pt4);
        pts.push(pt5);
        ply = new BMap.Polygon(pts);
        
        //演示：将多边形添加到地图上
        map.clearOverlays();
        map.addOverlay(ply);
    }

    map.addEventListener("click", function (e) {
        mkr.setPosition(e.point);
        map.addOverlay(mkr);
        //将点击的点的坐标显示在页面上
        document.getElementById("lng").value = e.point.lng;
        document.getElementById("lat").value = e.point.lat;

        InOrOutPolygon(e.point.lng, e.point.lat);
    });

    function InOrOutPolygon(lng, lat){
        var pt = new BMap.Point(lng, lat);
        var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
        if (result == true) {
            document.getElementById("result").innerHTML = "点在多边形内";
        } else {
            document.getElementById("result").innerHTML = "点在多边形外";
        }
    }

</script>

直接将代码复制到本地html文件运行即可，得到如下页面

其中多边形1测试用例没有问题，但是多边形2测试时，只需要将点选在一些特殊位置就会判断错误，如图

此处的射线法求证时，没有考虑到这种情况，所选点的纬度为39.915时，与多边形2的pt3，pt4纬度一致，就会发生错误判断，即使点明显在范围内，也会得出在范围外的结论。而网上的demo基本都是采用这种射线法求证，希望百度地图可以对此算法的bug进行纠正，以保证准确性，如果文中有错误的地方随时发邮件联系547255628@qq.com，我会及时更改吐舌头

陈十一

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图js中地理围栏算法bug

本人近期因为项目需要，尝试把百度的js地理围栏算法改成java实现，测试过程中发现有bug存在，一开始以为是转换过程中出现了问题，后来测试了原生js，发现问题确实存在。此处demo我参照了网上的示例原demo，后来我将测试数据稍微变更便发现了问题。测试代码：&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" conte...
复制链接

扫一扫

专栏目录