百度地图PC端判断用户是否在配送范围内

2020-01-14 18:51:38丽君
在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新增)

实现:

百度地图PC端判断用户是否在配送范围内

主要代码:


 //设置配送范围
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类型存在一个标签里面,以待后续的表单提交操作。