百度地图PC端判断用户是否在配送范围内
最近接了个项目，其中有项目需求是这样的：
在pc端设置商家的配送范围，用户在下单时，根据用户设置的配送地点判断是否在可配送范围内，并给用户相应的提示。
下面说下我的实现思路：
1.用百度地图在PC端设置配送范围，可拖拽选择
2.根据用户设置的配送地址判断是否在配送范围内
一、百度地图PC端获取范围
改动百度地图官网的demo，设置配送范围。
思路：获取多边形的顶点，以json的形式保存到数据库。
百度API关于多边形覆盖物：
构造函数：
Polygon(points:Array<Point>[, opts:PolygonOptions]) 创建多边形覆盖物
方法：
setPath(path:Array<Point>) none 设置多边型的点数组（自1.2新增）
getPath() Array<Point> 返回多边型的点数组（自1.2新增）
实现：
主要代码：
//设置配送范围
function setRange(_point, _ppoints){
var polygon = new BMap.Polygon(_ppoints, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
map.addOverlay(polygon); //增加多边形
polygon.enableEditing(); //允许编辑
polygon.addEventListener("lineupdate",function(e){
var rangeArr = polygon.getPath();
$("#distributeRange").val(JSON.stringify(rangeArr));
});
}
以上代码主要是监听 lineupdate 事件，每一次拖拽百度地图回调函数将返回的多边形的顶点，然后通过JSON.stringify方法转为string类型存在一个标签里面，以待后续的表单提交操作。
二、判断点是否在范围内
去网上看了一下，判断点是否在配送范围内的方法很多，大概采用的是射线法。
但是有一些方法没有考虑全面，导致有的情况判断不够准确。
在百度地图的GeoUtils里面找到了“判断点是否多边形内”这个方法。
因为我是需要在后端做判断，然后直接把js转化成了java，测试百发百中，欣喜！（后面附上测试方法）
/**
* 判断点是否在多边形内
* @param point 检测点
* @param pts 多边形的顶点
* @return 点在多边形内返回true,否则返回false
*/
public static boolean IsPtInPoly(Point2D.Double point, List<Point2D.Double> pts){
int N = pts.size();
boolean boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
int intersectCount = 0;//cross points count of x
double precision = 2e-10; //浮点类型计算时候与0比较时候的容差
Point2D.Double p1, p2;//neighbour bound vertices
Point2D.Double p = point; //当前点
p1 = pts.get(0);//left vertex
for(int i = 1; i <= N; ++i){//check all rays
if(p.equals(p1)){
return boundOrVertex;//p is an vertex
}
p2 = pts.get(i % N);//right vertex
if(p.x < Math.min(p1.x, p2.x) || p.x > Math.max(p1.x, p2.x)){//ray is outside of our interests
p1 = p2;
continue;//next ray left point
}
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)
if(p.y <= Math.max(p1.y, p2.y)){//x is before of ray
if(p1.x == p2.x && p.y >= Math.min(p1.y, p2.y)){//overlies on a horizontal ray
return boundOrVertex;
}
if(p1.y == p2.y){//ray is vertical
if(p1.y == p.y){//overlies on a vertical ray
return boundOrVertex;
}else{//before ray
++intersectCount;
}
}else{//cross point on the left side
double xinters = (p.x - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;//cross point of y
if(Math.abs(p.y - xinters) < precision){//overlies on a ray
return boundOrVertex;
}
if(p.y < xinters){//before ray
++intersectCount;
}
}
}
}else{//special case when ray is crossing through the vertex
if(p.x == p2.x && p.y <= p2.y){//p crossing over p2
Point2D.Double p3 = pts.get((i+1) % N); //next vertex
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
++intersectCount;
}else{
intersectCount += 2;
}
}
}
p1 = p2;//next ray left point
}
if(intersectCount % 2 == 0){//偶数在多边形外
return false;
} else { //奇数在多边形内
return true;
}
}
主要是判断和这个方法的可行性。
为此写了个测试方法。
思路：获取一个多边形的顶点，然后随机点一个点
1.调用百度地图的方法，判断该点是否在范围内
2.根据百度地图获取的那个店的经纬度，自己程序判断是否在范围内
调用百度地图的方法：
<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" onclick="polygon1()" /></td>
</tr>
<tr>
<td><input type="button" value="多边形2" onclick="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.394, 39.914);
var pt3 = new BMap.Point(116.396, 39.919);
var pt4 = new BMap.Point(116.406, 39.920);
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);
}
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>
界面如下：
在页面上点击一个点后，获取了该点的坐标（用于自己的方法测试），并调用了 InOrOutPolygon 来判断了该店是否在此范围内。
后台的测试方法：
// 测试一个点是否在多边形内
public static void main(String[] args) {
Point2D.Double point = new Point2D.Double(116.404072, 39.916605);
List<Point2D.Double> pts = new ArrayList<Point2D.Double>();
pts.add(new Point2D.Double(116.395, 39.910));
pts.add(new Point2D.Double(116.394, 39.914));
pts.add(new Point2D.Double(116.403, 39.920));
pts.add(new Point2D.Double(116.402, 39.914));
pts.add(new Point2D.Double(116.410, 39.913));
if(IsPtInPoly(point, pts)){
System.out.println("点在多边形内");
}else{
System.out.println("点在多边形外");
}
}
经过测试，结果满意。
总结，实现的过程最重要是保存那些顶点，并根据那些保存的顶点（有一定的顺序），来判断一个点是否在这些顶点围成的多边形内。
感觉百度地图还是很好用的。API很全，而且都配有demo，非常利于我们开发者。
以上内容是针对百度地图PC端判断用户是否在配送范围内的相关知识，希望对大家有所帮助。
相关推荐
-
百度地图API之本地搜索与范围搜索
地图服务是指可以提供数据信息的接口,比如说本地搜索/路线规划等,下面小编给大家整理下百度地图API之本地搜索和范围搜索,具体请看下文. 地图服务概述 地图服务是指那些提供数据信息的接口,比如本地搜索.路线规划等等.百度地图API提供的服务有: LocalSearch:本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索"公园". TransitRoute:公交导航,提供某一特定地区的公交出行方案的搜索服务. DrivingRoute:驾车导航,提供驾车出行方案的搜索服务. Wal
-
ios百度地图的使用（普通定位、反地理编码）
iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置),下面通过代码给大家详解,代码如下: #import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate> 使用的代理名称 //1.使用定位服务 //设置app有访问定位服务的权限 //在使用应用期间 / 始终(app在后台) //info.plist文件添加以下两条(或者其中一条): //NSLoc
-
百度地图PC端判断用户是否在配送范围内
最近接了个项目,其中有项目需求是这样的: 在pc端设置商家的配送范围,用户在下单时,根据用户设置的配送地点判断是否在可配送范围内,并给用户相应的提示. 下面说下我的实现思路: 1.用百度地图在PC端设置配送范围,可拖拽选择 2.根据用户设置的配送地址判断是否在配送范围内 一.百度地图PC端获取范围 改动百度地图官网的demo,设置配送范围. 思路:获取多边形的顶点,以json的形式保存到数据库. 百度API关于多边形覆盖物: 构造函数: Polygon(points:Array<Point>[
-
Android百度地图定位、显示用户当前位置
本文实例为大家分享了Android百度地图定位.显示用户当前位置的工具类,供大家参考,具体内容如下 1.构建定位Option的工具类 import com.baidu.location.LocationClientOption; /** * 建造 LocationClientOption 项 * * @author peter 2018-12-21 10:58 */ public class LocationClientOptionBuilder { private LocationClient
-
Map.vue基于百度地图组件重构笔记分享
Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,
-
js如何判断用户是在PC端和还是移动端访问
最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户
-
thinkphp判断访客为手机端或PC端的方法
本文实例讲述了thinkphp判断访客为手机端或PC端的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 近日准备给自己的网站做一个小升级,让用户在手机二维码扫描的时候显示适合手机端来展示的模版[我用的是ThinkPHP3.0],代码是参考别人的 二.实现方法: 这里先说下大概的一个思路 简单两步: 统版本号和浏览器以及它的版本号(贴出的代码中数组中只有移动端信息,因此后面只需判断是否为数组中的某一个值即可). 根据数组中的值来判断访客是否为手机.pad.之类的移动端,如果是的话就规定
-
js判断当前页面在移动设备还是在PC端中打开
本文实例讲解了js判断当前页面在移动设备还是在PC端中打开的详细代码,分享给大家供大家参考,具体内容如下 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1,
-
判断iOS、Android以及PC端的示例代码
前言 我们在做移动端时,在跨平台.浏览器.移动设备兼容的时候,要根据设备.浏览器做特定调整,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下 还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制 1.navigator的一些常用属性 navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象 navigator.appVersion 浏览器的版本号 navigator.language 浏览器使用
-
通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端的操作方法
本篇记录我在实现时的思考过程,写给之后可能遇到困难的我自己也给到需要帮助的人.写的比较浅显,见谅. 在写项目代码的时候,需要把Android端的位置信息传输到服务器端,通过Netty达到连续传输的效果,如下: 我们可以先来看看百度地图官方给出的相关代码 public class MainActivity extends AppCompatActivity { private MapView mMapView = null; private BaiduMap mBaiduMap = null; p
-
百度地图API应用之获取用户的具体位置
功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro
-
js判断手机和pc端选择不同执行事件的方法
本文实例讲述了js判断手机和pc端选择不同执行事件的方法.分享给大家供大家参考.具体如下: 判断是否为手机: function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/ipad/i) == "ipad", bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os", bI