在pc端设置商家的配送范围，用户在下单时，根据用户设置的配送地点判断是否在可配送范围内，并给用户相应的提示。

下面说下我的实现思路：

1.用百度地图在PC端设置配送范围，可拖拽选择

2.根据用户设置的配送地址判断是否在配送范围内

一、百度地图PC端获取范围

改动百度地图官网的demo，设置配送范围。

思路：获取多边形的顶点，以json的形式保存到数据库。

百度API关于多边形覆盖物：

构造函数：

Polygon(points:Array[, opts:PolygonOptions]) 创建多边形覆盖物

方法：

setPath(path:Array) none 设置多边型的点数组（自1.2新增）

getPath() Array 返回多边型的点数组（自1.2新增）

实现：

  1. //设置配送范围
  2. function setRange(_point, _ppoints) {
  3.     var polygon = new BMap.Polygon(_ppoints, {
  4.         strokeColor: "blue",
  5.         strokeWeight: 2,
  6.         strokeOpacity: 0.5
  7.     }); //创建多边形
  8.     map.addOverlay(polygon); //增加多边形
  9.     polygon.enableEditing(); //允许编辑
  10.     polygon.addEventListener("lineupdate",
  11.     function(e) {
  12.         var rangeArr = polygon.getPath();
  13.         $("#distributeRange").val(JSON.stringify(rangeArr));
  14.     });
  15. }

以上代码主要是监听 lineupdate 事件，每一次拖拽百度地图回调函数将返回的多边形的顶点，然后通过JSON.stringify方法转为string类型存在一个标签里面，以待后续的表单提交操作。

二、判断点是否在范围内

去网上看了一下，判断点是否在配送范围内的方法很多，大概采用的是射线法。

但是有一些方法没有考虑全面，导致有的情况判断不够准确。

在百度地图的GeoUtils里面找到了“判断点是否多边形内”这个方法。

因为我是需要在后端做判断，然后直接把js转化成了java，测试百发百中，欣喜！（后面附上测试方法）

  1. /**
  2. * 判断点是否在多边形内
  3. * @param point 检测点
  4. * @param pts 多边形的顶点
  5. * @return 点在多边形内返回true,否则返回false
  6. */
  7. public static boolean IsPtInPoly(Point2D.Double point, List < Point2D.Double > pts) {
  8.    int N = pts.size();
  9.    boolean boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
  10.    int intersectCount = 0; //cross points count of x
  11.    double precision = 2e-10; //浮点类型计算时候与0比较时候的容差
  12.    Point2D.Double p1,
  13.    p2; //neighbour bound vertices
  14.    Point2D.Double p = point; //当前点
  15.    p1 = pts.get(0); //left vertex
  16.    for (int i = 1; i <= N; ++i) { //check all rays
  17.        if (p.equals(p1)) {
  18.            return boundOrVertex; //p is an vertex
  19.        }
  20.        p2 = pts.get(i % N); //right vertex
  21.        if (p.x < Math.min(p1.x, p2.x) || p.x > Math.max(p1.x, p2.x)) { //ray is outside of our interests
  22.            p1 = p2;
  23.            continue; //next ray left point
  24.        }
  25.        if (p.x > Math.min(p1.x, p2.x) && p.x < Math.max(p1.x, p2.x)) { //ray is crossing over by the algorithm (common part of)
  26.            if (p.y <= Math.max(p1.y, p2.y)) { //x is before of ray
  27.                if (p1.x == p2.x && p.y >= Math.min(p1.y, p2.y)) { //overlies on a horizontal ray
  28.                    return boundOrVertex;
  29.                }
  30.                if (p1.y == p2.y) { //ray is vertical
  31.                    if (p1.y == p.y) { //overlies on a vertical ray
  32.                        return boundOrVertex;
  33.                    } else { //before ray
  34.                        ++intersectCount;
  35.                    }
  36.                } else { //cross point on the left side
  37.                    double xinters = (p.x - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y; //cross point of y
  38.                    if (Math.abs(p.y - xinters) < precision) { //overlies on a ray
  39.                        return boundOrVertex;
  40.                    }
  41.                    if (p.y < xinters) { //before ray
  42.                        ++intersectCount;
  43.                    }
  44.                }
  45.            }
  46.        } else { //special case when ray is crossing through the vertex
  47.            if (p.x == p2.x && p.y <= p2.y) { //p crossing over p2
  48.                Point2D.Double p3 = pts.get((i + 1) % N); //next vertex
  49.                if (p.x >= Math.min(p1.x, p3.x) && p.x <= Math.max(p1.x, p3.x)) { //p.x lies between p1.x & p3.x
  50.                    ++intersectCount;
  51.                } else {
  52.                    intersectCount += 2;
  53.                }
  54.            }
  55.        }
  56.        p1 = p2; //next ray left point
  57.    }
  58.    if (intersectCount % 2 == 0) { //偶数在多边形外
  59.        return false;
  60.    } else { //奇数在多边形内
  61.        return true;
  62.    }
  63. }

主要是判断和这个方法的可行性。

为此写了个测试方法。

思路：获取一个多边形的顶点，然后随机点一个点

1.调用百度地图的方法，判断该点是否在范围内

2.根据百度地图获取的那个店的经纬度，自己程序判断是否在范围内

调用百度地图的方法：

  1. <html>
  2. <head>
  3. <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  4. <title>GeoUtils示例</title>
  5. <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
  6. <script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js" type="text/javascript"></script>
  7. <style type="text/css">
  8.     table {
  9.       font-size: 14px;
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="container" style="float:left;width:600px;height:500px;border:1px solid gray">
  15. </div>
  16. <div id="control" style="float:left;width:300px;height:500px;border:1px solid gray">
  17. 	<table style="width:100%;">
  18. 	<tr>
  19. 		<td colspan="2">
  20. 			判断点是否在多边形内:
  21. 		</td>
  22. 	</tr>
  23. 	<tr>
  24. 		<td>
  25. 			<input onclick="polygon1()" type="button" value="多边形1"/>
  26. 		</td>
  27. 	</tr>
  28. 	<tr>
  29. 		<td>
  30. 			<input onclick="polygon2()" type="button" value="多边形2"/>
  31. 		</td>
  32. 	</tr>
  33. 	<tr>
  34. 		<td>
  35. 			经度<input id="lng" type="text" value="">
  36. 		</td>
  37. 	</tr>
  38. 	<tr>
  39. 		<td>
  40. 			纬度<input id="lat" type="text" value="">
  41. 		</td>
  42. 	</tr>
  43. 	<tr>
  44. 		<td>
  45. 			结果：
  46. 		</td>
  47. 	</tr>
  48. 	<tr>
  49. 		<td>
  50. 			<p id="result" style="color:red">
  51. 			</p>
  52. 		</td>
  53. 	</tr>
  54. 	<table>
  55. </div>
  56. </body>
  57. </html>
  58. <script type="text/javascript">
  59.   var map = new BMap.Map('container')
  60.   var pt = new BMap.Point(116.404, 39.915)
  61.   var mkr = new BMap.Marker(pt)
  62.   var ply //多边形
  63.   map.centerAndZoom(pt, 16)
  64.   map.enableScrollWheelZoom() //开启滚动缩放
  65.   map.enableContinuousZoom() //开启缩放平滑
  66.   //初始化为多边形1
  67.   polygon1()
  68.   //生成多边形1
  69.   function polygon1 () {
  70.     var pts = []
  71.     var pt1 = new BMap.Point(116.395, 39.910)
  72.     var pt2 = new BMap.Point(116.394, 39.914)
  73.     var pt3 = new BMap.Point(116.403, 39.920)
  74.     var pt4 = new BMap.Point(116.402, 39.914)
  75.     var pt5 = new BMap.Point(116.410, 39.913)
  76.     pts.push(pt1)
  77.     pts.push(pt2)
  78.     pts.push(pt3)
  79.     pts.push(pt4)
  80.     pts.push(pt5)
  81.     ply = new BMap.Polygon(pts)
  82. //演示：将面添加到地图上
  83.     map.clearOverlays()
  84.     map.addOverlay(ply)
  85.   }
  86.   //生成多边形2
  87.   function polygon2 () {
  88.     var pts = []
  89.     var pt1 = new BMap.Point(116.395, 39.910)
  90.     var pt2 = new BMap.Point(116.394, 39.914)
  91.     var pt3 = new BMap.Point(116.396, 39.919)
  92.     var pt4 = new BMap.Point(116.406, 39.920)
  93.     var pt5 = new BMap.Point(116.410, 39.913)
  94.     pts.push(pt1)
  95.     pts.push(pt2)
  96.     pts.push(pt3)
  97.     pts.push(pt4)
  98.     pts.push(pt5)
  99.     ply = new BMap.Polygon(pts)
  100. //演示：将多边形添加到地图上
  101.     map.clearOverlays()
  102.     map.addOverlay(ply)
  103.   }
  104.   map.addEventListener('click', function (e) {
  105.     mkr.setPosition(e.point)
  106.     map.addOverlay(mkr)
  107. //将点击的点的坐标显示在页面上
  108.     document.getElementById('lng').value = e.point.lng
  109.     document.getElementById('lat').value = e.point.lat
  110.     InOrOutPolygon(e.point.lng, e.point.lat)
  111.   })
  112.   function InOrOutPolygon (lng, lat) {
  113.     var pt = new BMap.Point(lng, lat)
  114.     var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply)
  115.     if (result == true) {
  116.       document.getElementById('result').innerHTML = '点在多边形内'
  117.     } else {
  118.       document.getElementById('result').innerHTML = '点在多边形外'
  119.     }
  120.   }
  121. </script>

界面如下：

在页面上点击一个点后，获取了该点的坐标（用于自己的方法测试），并调用了 InOrOutPolygon 来判断了该店是否在此范围内。

后台的测试方法：

  1. // 测试一个点是否在多边形内
  2. public static void main(String[] args) {
  3. 	Point2D.Double point = new Point2D.Double(116.404072, 39.916605);
  4. 	List<Point2D.Double> pts = new ArrayList<Point2D.Double>();
  5. 	pts.add(new Point2D.Double(116.395, 39.910));
  6. 	pts.add(new Point2D.Double(116.394, 39.914));
  7. 	pts.add(new Point2D.Double(116.403, 39.920));
  8. 	pts.add(new Point2D.Double(116.402, 39.914));
  9. 	pts.add(new Point2D.Double(116.410, 39.913));
  10. 	if (IsPtInPoly(point, pts)) {
  11. 		System.out.println("点在多边形内");
  12. 	} else {
  13. 		System.out.println("点在多边形外");
  14. 	}
  15. }

经过测试，结果满意。

总结，实现的过程最重要是保存那些顶点，并根据那些保存的顶点（有一定的顺序），来判断一个点是否在这些顶点围成的多边形内。

感觉百度地图还是很好用的。API很全，而且都配有demo，非常利于我们开发者。

百度地图WEB端判断用户是否在网格范围内的更多相关文章

  1. O2O地图应用之判断用户订单地址是否在服务范围内

    O2O地图应用之判断用户订单地址是否在服务范围内 需求分析 在o2o项目中,经常要用到在用户下单时判断用户所填地址的坐标点是否在服务范围内的情况,这里参考网上的实现方式,用C#来实现,经测试后有效,特 ...

  2. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  3. 【百度地图API】让用户选择起点和终点的驾车导航

    原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...

  4. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  5. 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  6. 【转】【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    [转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...

  7. 高德地图web 端智能围栏

    最近有个项目,需要在web上批量给设备设置智能围栏,设备超出范围报警,查看高德地图webJS API,web端操作案例如,后台判断没有提供源码 <!-- 重点参数:iconStyle --> ...

  8. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  9. 百度地图web api使用案例

    效果如下: 1.获取位置的经纬度: 如坐标:114.110033,22.541098 获取经纬度: http://api.map.baidu.com/lbsapi/getpoint/index.htm ...

随机推荐

  1. 关于JSP页面的静态包含和动态包含

    JSP中有两种包含:静态包含:<%@include file="被包含页面"%> 和 动态包含:<jsp:include page="被包含页面&quo ...

  2. SpringBoot学习------SpringBoot使用Thymleaf模块访问不了静态页面

    SpringBoot使用Thymleaf模块访问不了静态页面 最近学习SpringBoot的过程中使用了Thymeleaf模块引擎,页面发送请求后老是无法显示静态页面,所有的步骤都是参考资料来执行,自 ...

  3. React预备知识点

    1.react中的状态提升 react的状态提升就是用户对子组件操作,子组件不改变自己的状态,而是通过自己的props把操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的 ...

  4. getline()与get()（c++学习笔记）

    istream中的类(如cin)提供了一些面向行的类成员函数:getline()和get() 1.getline()函数 读取整行,使用回车键输入的换行符来确定输入结尾. 调用方法:cin.getli ...

  5. python+unittest框架第六天unittest之优化测试报告

    今天的内容主要是,用第三方的HTMLRUNner 第三方的报告来优化之前第五天批量执行案例的测试报告.案例的部分看第五天的批量执行笔记~ HTMLRUNner他可以生成更美观的测试报告,基于前辈造的车 ...

  6. JavaScript 数据结构与算法之美 - 线性表（数组、栈、队列、链表）

    前言 基础知识就像是一座大楼的地基,它决定了我们的技术高度. 我们应该多掌握一些可移值的技术或者再过十几年应该都不会过时的技术,数据结构与算法就是其中之一. 栈.队列.链表.堆 是数据结构与算法中的基 ...

  7. 读书分享全网学习资源大合集，推荐Python3标准库等五本书「02」

    0.前言 在此之前,我已经为准备学习python的小白同学们准备了轻量级但超无敌的python开发利器之visio studio code使用入门系列.详见 1.PYTHON开发利器之VS Code使 ...

  8. jQuery实现发送验证码30s倒计时，且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  9. JavaScript Array 数组方法汇总

    JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...

  10. Delphi - cxGrid颜色显示相关设置

    1:单元格的值满足某个条件时,该单元格所在整行颜色设置整行字体设置 选中cxGridDBTableView,单击F11调出属性配置面板,在Events中双击OnCustomDrawCell后双击编辑重 ...