利用百度API(JavaScript 版)實如今地圖上繪製任一多邊形,並判斷給定經緯度是否在多邊形範圍內。以及兩點間的測距功能。css
- <img src="http://img.blog.csdn.net/20150915193750707?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
判斷點範圍,測距:html




html代碼:java
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/css">
- body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
- #allmap {height:500px; width: 100%;}
- #control{width:100%;}
- </style>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iqgvSM0gddG4NkGXFlawVa6C"></script>
- <script type="text/javascript" src="GeoUtils.js"></script>
- <title>設置線、面可編輯</title>
- </head>
- <body>
- <div id="allmap"></div>
- <div id="control">
- <button onclick = "polyline.enableEditing();polygon.enableEditing();">開啓線、面編輯功能</button>
- <button onclick = "polyline.disableEditing();polygon.disableEditing();">關閉線、面編輯功能</button>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- // 百度地圖API功能
- var map = new BMap.Map("allmap");
- map.centerAndZoom(new BMap.Point(106.613922,29.53832), 15);
- map.enableScrollWheelZoom();
-
- var polyline = new BMap.Polyline([
- new BMap.Point(106.612539,29.529602),
- new BMap.Point(106.607975,29.53177),
- new BMap.Point(106.610311,29.525862),
- new BMap.Point(106.60776,29.524008)
- ], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //建立折線
- map.addOverlay(polyline); //增長折線
-
- var polygon = new BMap.Polygon([
- new BMap.Point(106.607477,29.544864),
- new BMap.Point(106.613572,29.548324),
- new BMap.Point(106.619357,29.537421),
- new BMap.Point(106.612988,29.537079),
- new BMap.Point(106.615359,29.541143)
- ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //建立多邊形
- map.addOverlay(polygon); //增長多邊形
-
- var ppoint = new BMap.Point(106.613087,29.540485);
-
- var result=BMapLib.GeoUtils.isPointInPolygon(ppoint, polygon);
-
- alert("數字圖書館是否在多邊形範圍內:"+result);
-
- var ppoint1 = new BMap.Point(106.614986,29.539876);
-
- var result1=BMapLib.GeoUtils.isPointInPolygon(ppoint1, polygon);
-
- alert("乒乓球館是否在多邊形範圍內:"+result1+"米");
-
- var distance =map.getDistance(ppoint, ppoint1);
-
- alert("The Distance is"+distance);
-
- </script>
第二步,添加GeoUtils.js文件,代碼以下:算法
-
-
-
-
-
-
-
-
-
-
- var BMapLib = window.BMapLib = BMapLib || {};
- (function () {
-
-
- var EARTHRADIUS = 6370996.81;
-
-
- var GeoUtils =
-
- BMapLib.GeoUtils = function () {
- }
-
-
- GeoUtils.isPointInRect = function (point, bounds) {
-
- if (!(point instanceof BMap.Point) ||
- !(bounds instanceof BMap.Bounds)) {
- return false;
- }
- var sw = bounds.getSouthWest();
- var ne = bounds.getNorthEast();
- return (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat);
- }
-
-
- GeoUtils.isPointInCircle = function (point, circle) {
-
- if (!(point instanceof BMap.Point) ||
- !(circle instanceof BMap.Circle)) {
- return false;
- }
-
-
- var c = circle.getCenter();
- var r = circle.getRadius();
-
- var dis = GeoUtils.getDistance(point, c);
- if (dis <= r) {
- return true;
- } else {
- return false;
- }
- }
-
-
- GeoUtils.isPointOnPolyline = function (point, polyline) {
-
- if (!(point instanceof BMap.Point) ||
- !(polyline instanceof BMap.Polyline)) {
- return false;
- }
-
-
- var lineBounds = polyline.getBounds();
- if (!this.isPointInRect(point, lineBounds)) {
- return false;
- }
-
-
-
- var pts = polyline.getPath();
- for (var i = 0; i < pts.length - 1; i++) {
- var curPt = pts[i];
- var nextPt = pts[i + 1];
-
- if (point.lng >= Math.min(curPt.lng, nextPt.lng) && point.lng <= Math.max(curPt.lng, nextPt.lng) &&
- point.lat >= Math.min(curPt.lat, nextPt.lat) && point.lat <= Math.max(curPt.lat, nextPt.lat)) {
-
- var precision = (curPt.lng - point.lng) * (nextPt.lat - point.lat) - (nextPt.lng - point.lng) * (curPt.lat - point.lat);
- if (precision < 2e-10 && precision > -2e-10) {
- return true;
- }
- }
- }
- return false;
- }
-
-
- GeoUtils.isPointInPolygon = function (point, polygon) {
-
- if (!(point instanceof BMap.Point) ||
- !(polygon instanceof BMap.Polygon)) {
- return false;
- }
-
-
- var polygonBounds = polygon.getBounds();
- if (!this.isPointInRect(point, polygonBounds)) {
- return false;
- }
-
- var pts = polygon.getPath();
-
-
-
-
-
- var N = pts.length;
- var boundOrVertex = true;
- var intersectCount = 0;
- var precision = 2e-10;
- var p1, p2;
- var p = point;
-
- p1 = pts[0];
- for (var i = 1; i <= N; ++i) {
- if (p.equals(p1)) {
- return boundOrVertex;
- }
-
- p2 = pts[i % N];
- if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {
- p1 = p2;
- continue;
- }
- if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {
- if (p.lng <= Math.max(p1.lng, p2.lng)) {
- if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) {
- return boundOrVertex;
- }
-
- if (p1.lng == p2.lng) {
-
-
- if (p1.lng == p.lng) {
- return boundOrVertex;
- } else {
- ++intersectCount;
- }
- } else {
-
-
- var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;
-
-
- if (Math.abs(p.lng - xinters) < precision) {
- return boundOrVertex;
- }
-
- if (p.lng < xinters) {
- ++intersectCount;
- }
- }
- }
- } else {
- if (p.lat == p2.lat && p.lng <= p2.lng) {
- var p3 = pts[(i + 1) % N];
-
-
- if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) {
- ++intersectCount;
- } else {
- intersectCount += 2;
- }
- }
- }
- p1 = p2;
- }
-
- if (intersectCount % 2 == 0) {
- return false;
- } else {
- return true;
- }
- }
-
-
- GeoUtils.degreeToRad = function (degree) {
- return Math.PI * degree / 180;
- }
-
-
- GeoUtils.radToDegree = function (rad) {
- return (180 * rad) / Math.PI;
- }
-
-
- function _getRange(v, a, b) {
- if (a != null) {
- v = Math.max(v, a);
- }
- if (b != null) {
- v = Math.min(v, b);
- }
- return v;
- }
-
-
- function _getLoop(v, a, b) {
- while (v > b) {
- v -= b - a
- }
- while (v < a) {
- v += b - a
- }
- return v;
- }
-
-
- GeoUtils.getDistance = function (point1, point2) {
-
- if (!(point1 instanceof BMap.Point) ||
- !(point2 instanceof BMap.Point)) {
- return 0;
- }
-
- point1.lng = _getLoop(point1.lng, -180, 180);
- point1.lat = _getRange(point1.lat, -74, 74);
- point2.lng = _getLoop(point2.lng, -180, 180);
- point2.lat = _getRange(point2.lat, -74, 74);
-
- var x1, x2, y1, y2;
- x1 = GeoUtils.degreeToRad(point1.lng);
- y1 = GeoUtils.degreeToRad(point1.lat);
- x2 = GeoUtils.degreeToRad(point2.lng);
- y2 = GeoUtils.degreeToRad(point2.lat);
-
- return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
- }
-
-
- GeoUtils.getPolylineDistance = function (polyline) {
-
- if (polyline instanceof BMap.Polyline ||
- polyline instanceof Array) {
-
- var pts;
- if (polyline instanceof BMap.Polyline) {
- pts = polyline.getPath();
- } else {
- pts = polyline;
- }
-
- if (pts.length < 2) {
- return 0;
- }
-
-
- var totalDis = 0;
- for (var i = 0; i < pts.length - 1; i++) {
- var curPt = pts[i];
- var nextPt = pts[i + 1]
- var dis = GeoUtils.getDistance(curPt, nextPt);
- totalDis += dis;
- }
-
- return totalDis;
-
- } else {
- return 0;
- }
- }
-
-
- GeoUtils.getPolygonArea = function (polygon) {
-
- if (!(polygon instanceof BMap.Polygon) &&
- !(polygon instanceof Array)) {
- return 0;
- }
- var pts;
- if (polygon instanceof BMap.Polygon) {
- pts = polygon.getPath();
- } else {
- pts = polygon;
- }
-
- if (pts.length < 3) {
- return 0;
- }
-
- var totalArea = 0;
- var LowX = 0.0;
- var LowY = 0.0;
- var MiddleX = 0.0;
- var MiddleY = 0.0;
- var HighX = 0.0;
- var HighY = 0.0;
- var AM = 0.0;
- var BM = 0.0;
- var CM = 0.0;
- var AL = 0.0;
- var BL = 0.0;
- var CL = 0.0;
- var AH = 0.0;
- var BH = 0.0;
- var CH = 0.0;
- var CoefficientL = 0.0;
- var CoefficientH = 0.0;
- var ALtangent = 0.0;
- var BLtangent = 0.0;
- var CLtangent = 0.0;
- var AHtangent = 0.0;
- var BHtangent = 0.0;
- var CHtangent = 0.0;
- var ANormalLine = 0.0;
- var BNormalLine = 0.0;
- var CNormalLine = 0.0;
- var OrientationValue = 0.0;
- var AngleCos = 0.0;
- var Sum1 = 0.0;
- var Sum2 = 0.0;
- var Count2 = 0;
- var Count1 = 0;
- var Sum = 0.0;
- var Radius = EARTHRADIUS;
- var Count = pts.length;
- for (var i = 0; i < Count; i++) {
- if (i == 0) {
- LowX = pts[Count - 1].lng * Math.PI / 180;
- LowY = pts[Count - 1].lat * Math.PI / 180;
- MiddleX = pts[0].lng * Math.PI / 180;
- MiddleY = pts[0].lat * Math.PI / 180;
- HighX = pts[1].lng * Math.PI / 180;
- HighY = pts[1].lat * Math.PI / 180;
- }
- else if (i == Count - 1) {
- LowX = pts[Count - 2].lng * Math.PI / 180;
- LowY = pts[Count - 2].lat * Math.PI / 180;
- MiddleX = pts[Count - 1].lng * Math.PI / 180;
- MiddleY = pts[Count - 1].lat * Math.PI / 180;
- HighX = pts[0].lng * Math.PI / 180;
- HighY = pts[0].lat * Math.PI / 180;
- }
- else {
- LowX = pts[i - 1].lng * Math.PI / 180;
- LowY = pts[i - 1].lat * Math.PI / 180;
- MiddleX = pts[i].lng * Math.PI / 180;
- MiddleY = pts[i].lat * Math.PI / 180;
- HighX = pts[i + 1].lng * Math.PI / 180;
- HighY = pts[i + 1].lat * Math.PI / 180;
- }
- AM = Math.cos(MiddleY) * Math.cos(MiddleX);
- BM = Math.cos(MiddleY) * Math.sin(MiddleX);
- CM = Math.sin(MiddleY);
- AL = Math.cos(LowY) * Math.cos(LowX);
- BL = Math.cos(LowY) * Math.sin(LowX);
- CL = Math.sin(LowY);
- AH = Math.cos(HighY) * Math.cos(HighX);
- BH = Math.cos(HighY) * Math.sin(HighX);
- CH = Math.sin(HighY);
- CoefficientL = (AM * AM + BM * BM + CM * CM) / (AM * AL + BM * BL + CM * CL);
- CoefficientH = (AM * AM + BM * BM + CM * CM) / (AM * AH + BM * BH + CM * CH);
- ALtangent = CoefficientL * AL - AM;
- BLtangent = CoefficientL * BL - BM;
- CLtangent = CoefficientL * CL - CM;
- AHtangent = CoefficientH * AH - AM;
- BHtangent = CoefficientH * BH - BM;
- CHtangent = CoefficientH * CH - CM;
- AngleCos = (AHtangent * ALtangent + BHtangent * BLtangent + CHtangent * CLtangent) / (Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent));
- AngleCos = Math.acos(AngleCos);
- ANormalLine = BHtangent * CLtangent - CHtangent * BLtangent;
- BNormalLine = 0 - (AHtangent * CLtangent - CHtangent * ALtangent);
- CNormalLine = AHtangent * BLtangent - BHtangent * ALtangent;
- if (AM != 0)
- OrientationValue = ANormalLine / AM;
- else if (BM != 0)
- OrientationValue = BNormalLine / BM;
- else
- OrientationValue = CNormalLine / CM;
- if (OrientationValue > 0) {
- Sum1 += AngleCos;
- Count1++;
- }
- else {
- Sum2 += AngleCos;
- Count2++;
- }
- }
- var tempSum1, tempSum2;
- tempSum1 = Sum1 + (2 * Math.PI * Count2 - Sum2);
- tempSum2 = (2 * Math.PI * Count1 - Sum1) + Sum2;
- if (Sum1 > Sum2) {
- if ((tempSum1 - (Count - 2) * Math.PI) < 1)
- Sum = tempSum1;
- else
- Sum = tempSum2;
- }
- else {
- if ((tempSum2 - (Count - 2) * Math.PI) < 1)
- Sum = tempSum2;
- else
- Sum = tempSum1;
- }
- totalArea = (Sum - (Count - 2) * Math.PI) * Radius * Radius;
- return totalArea;
- }