百度地圖PC端判斷用戶是否在配送范圍內(nèi)
最近接了個(gè)項(xiàng)目，其中有項(xiàng)目需求是這樣的：
在pc端設(shè)置商家的配送范圍，用戶在下單時(shí)，根據(jù)用戶設(shè)置的配送地點(diǎn)判斷是否在可配送范圍內(nèi)，并給用戶相應(yīng)的提示。
下面說下我的實(shí)現(xiàn)思路：
1.用百度地圖在PC端設(shè)置配送范圍，可拖拽選擇
2.根據(jù)用戶設(shè)置的配送地址判斷是否在配送范圍內(nèi)
一、百度地圖PC端獲取范圍
改動(dòng)百度地圖官網(wǎng)的demo，設(shè)置配送范圍。
思路：獲取多邊形的頂點(diǎn)，以json的形式保存到數(shù)據(jù)庫。
百度API關(guān)于多邊形覆蓋物：
構(gòu)造函數(shù)：
Polygon(points:Array<Point>[, opts:PolygonOptions]) 創(chuàng)建多邊形覆蓋物
方法：
setPath(path:Array<Point>) none 設(shè)置多邊型的點(diǎn)數(shù)組（自1.2新增）
getPath() Array<Point> 返回多邊型的點(diǎn)數(shù)組（自1.2新增）
實(shí)現(xiàn)：
主要代碼：
//設(shè)置配送范圍
function setRange(_point, _ppoints){
var polygon = new BMap.Polygon(_ppoints, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建多邊形
map.addOverlay(polygon); //增加多邊形
polygon.enableEditing(); //允許編輯
polygon.addEventListener("lineupdate",function(e){
var rangeArr = polygon.getPath();
$("#distributeRange").val(JSON.stringify(rangeArr));
});
}
以上代碼主要是監(jiān)聽 lineupdate 事件，每一次拖拽百度地圖回調(diào)函數(shù)將返回的多邊形的頂點(diǎn)，然后通過JSON.stringify方法轉(zhuǎn)為string類型存在一個(gè)標(biāo)簽里面，以待后續(xù)的表單提交操作。
二、判斷點(diǎn)是否在范圍內(nèi)
去網(wǎng)上看了一下，判斷點(diǎn)是否在配送范圍內(nèi)的方法很多，大概采用的是射線法。
但是有一些方法沒有考慮全面，導(dǎo)致有的情況判斷不夠準(zhǔn)確。
在百度地圖的GeoUtils里面找到了“判斷點(diǎn)是否多邊形內(nèi)”這個(gè)方法。
因?yàn)槲沂切枰诤蠖俗雠袛啵缓笾苯影裫s轉(zhuǎn)化成了java，測試百發(fā)百中，欣喜?。ê竺娓缴蠝y試方法）
/**
* 判斷點(diǎn)是否在多邊形內(nèi)
* @param point 檢測點(diǎn)
* @param pts 多邊形的頂點(diǎn)
* @return 點(diǎn)在多邊形內(nèi)返回true,否則返回false
*/
public static boolean IsPtInPoly(Point2D.Double point, List<Point2D.Double> pts){
int N = pts.size();
boolean boundOrVertex = true; //如果點(diǎn)位于多邊形的頂點(diǎn)或邊上，也算做點(diǎn)在多邊形內(nèi)，直接返回true
int intersectCount = 0;//cross points count of x
double precision = 2e-10; //浮點(diǎn)類型計(jì)算時(shí)候與0比較時(shí)候的容差
Point2D.Double p1, p2;//neighbour bound vertices
Point2D.Double p = point; //當(dāng)前點(diǎn)
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){//偶數(shù)在多邊形外
return false;
} else { //奇數(shù)在多邊形內(nèi)
return true;
}
}
主要是判斷和這個(gè)方法的可行性。
為此寫了個(gè)測試方法。
思路：獲取一個(gè)多邊形的頂點(diǎn)，然后隨機(jī)點(diǎn)一個(gè)點(diǎn)
1.調(diào)用百度地圖的方法，判斷該點(diǎn)是否在范圍內(nèi)
2.根據(jù)百度地圖獲取的那個(gè)店的經(jīng)緯度，自己程序判斷是否在范圍內(nèi)
調(diào)用百度地圖的方法：
<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">判斷點(diǎn)是否在多邊形內(nèi):</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>經(jīng)度<input type="text" value="" id="lng"></td>
</tr>
<tr>
<td>緯度<input type="text" value="" id="lat"></td>
</tr>
<tr>
<td>結(jié)果：</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(); //開啟滾動(dòng)縮放
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);
//將點(diǎn)擊的點(diǎn)的坐標(biāo)顯示在頁面上
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 = "點(diǎn)在多邊形內(nèi)";
} else {
document.getElementById("result").innerHTML = "點(diǎn)在多邊形外";
}
}
</script>
界面如下：
在頁面上點(diǎn)擊一個(gè)點(diǎn)后，獲取了該點(diǎn)的坐標(biāo)（用于自己的方法測試），并調(diào)用了 InOrOutPolygon 來判斷了該店是否在此范圍內(nèi)。
后臺的測試方法：
// 測試一個(gè)點(diǎn)是否在多邊形內(nèi)
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("點(diǎn)在多邊形內(nèi)");
}else{
System.out.println("點(diǎn)在多邊形外");
}
}
經(jīng)過測試，結(jié)果滿意。
總結(jié)，實(shí)現(xiàn)的過程最重要是保存那些頂點(diǎn)，并根據(jù)那些保存的頂點(diǎn)（有一定的順序），來判斷一個(gè)點(diǎn)是否在這些頂點(diǎn)圍成的多邊形內(nèi)。
感覺百度地圖還是很好用的。API很全，而且都配有demo，非常利于我們開發(fā)者。
以上內(nèi)容是針對百度地圖PC端判斷用戶是否在配送范圍內(nèi)的相關(guān)知識，希望對大家有所幫助。
相關(guān)文章
iOS實(shí)現(xiàn)從通訊錄中選擇聯(lián)系人
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)從通訊錄中選擇聯(lián)系人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
iOS字體抖動(dòng)動(dòng)畫的實(shí)現(xiàn)代碼
這篇文章主要介紹了iOS字體抖動(dòng)動(dòng)畫的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)解析了iOS直播類APP開發(fā)流程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
IOS 中UITextField和UITextView中字符串為空和空格的解決辦法
這篇文章主要介紹了IOS 中UITextField和UITextView中字符串為空和空格的解決辦法的相關(guān)資料,需要的朋友可以參考下2017-07-07
Swift是一門面向協(xié)議的語言，在使用Swift時(shí)我們已經(jīng)充分享受到了面向協(xié)議編程帶給我們的便利，但是Swift相比Obj-C還有一個(gè)更重要的優(yōu)點(diǎn)，那就是對函數(shù)式編程提供了很好的支持，其中Swift提供了map，filter，reduce這三個(gè)高階函數(shù)Higher Order function作為對容器的支持2017-12-12
iOS中自帶超強(qiáng)中文分詞器的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于iOS中自帶超強(qiáng)中文分詞器的實(shí)現(xiàn)方法，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
當(dāng)前移動(dòng)開發(fā)的趨勢已經(jīng)勢不可擋，這個(gè)系列希望淺談一下個(gè)人對IOS開發(fā)的一些見解，今天我們從最基礎(chǔ)的C語言開始，C語言部分我將分成幾個(gè)章節(jié)去說，今天我們簡單看一下C的一些基礎(chǔ)知識，更高級的內(nèi)容我將放到后面的文章中。2014-08-08
詳解iOS使用Keychain中的kSecClassGenericPassword存儲數(shù)據(jù)
iOS設(shè)備中的Keychain是一個(gè)安全的存儲容器,本篇文章主要介紹了iOS使用Keychain中的kSecClassGenericPassword存儲數(shù)據(jù)，有興趣的可以了解一下。2016-11-11
設(shè)計(jì)模式開發(fā)中的備忘錄模式在iOS應(yīng)用開發(fā)中的運(yùn)用實(shí)例
這篇文章主要介紹了設(shè)計(jì)模式開發(fā)中的備忘錄模式在iOS應(yīng)用開發(fā)中的實(shí)例,代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了IOS改變UISearchBar中搜索框的高度的相關(guān)資料,需要的朋友可以參考下2016-01-01