2010年11月12日星期五

Google Maps API V3学习 【射线法，点与面的关系】

来源：http://misswuyang.javaeye.com/blog/735313

4、射线法 点与面的关系【2010-08-11】（google.map.plugin.js下面有下载）

图：



Html代码 
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>点与面的关系title>  
  6. head>  
  7.   
  8. <body onload="initialize()">  
  9. <h1>点与面的关系h1>  
  10. <div id="map_canvas" style="width : 800px; height : 600px;">div>  
  11. <script type="text/javascript" src="jquery.js">script>   
  12. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">script>   
  13. <script type="text/javascript" src="<span style="white-space: normal; line-height: 18px;"><strong style="font-weight: bold;"><span style="color: #0000ff;">google.map.plugin.jsspan>strong>span>">script>   
  14.   
  15.   
  16. <input type='button' onclick='isPointInPolygon();' value='判断点与面的关系'>input>  
  17.   
  18. <input type='button' onclick='viewVertex();' value='查看面顶点的坐标'>input>  
  19.   
  20. <div style="padding:5px;">点与面的关系：<span id="relation">span>div>  
  21. <div id="console" style="padding:5px;">面积：<span id="total_km">span>div>  
  22. <input type='button' id='clearOverlays' onclick='clearOverlays();' value='清空地图'>input>  
  23. <div style="padding:5px;">面顶点信息：div>  
  24. <div style="padding:5px;" id="vertexInfo">div>  
  25. <script type="text/javascript">  
  26.   
  27. var map;  
  28. var marker;  
  29. var geocoder;  
  30. var markersArray = [];  
  31. var polygon;  
  32. var polygonArray =[];  
  33. var infowindowLevel = 0;  
  34.   
  35. var markerPoint ;  
  36.   
  37. function initialize() {  
  38.     geocoder = new google.maps.Geocoder();  
  39.     var myLatlng = new google.maps.LatLng(39.042102026773605,117.65275967700195);  
  40.     var myOptions = {  
  41.         zoom: 13,  
  42.         center: myLatlng,  
  43.         navigationControl: true,  
  44.         scaleControl: true,  
  45.         streetViewControl: true,  
  46.         mapTypeId: google.maps.MapTypeId.ROADMAP  
  47.     }  
  48.     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
  49.     google.maps.event.addListener(map, 'click',  
  50.     function(event) {  
  51.         addMarker(event.latLng);  
  52.     });   
  53.   
  54.     var latLngPoint = new google.maps.LatLng(39.042102026773605,117.65275967700195);  
  55.     markerPoint = new google.maps.Marker({  
  56.               position: latLngPoint,   
  57.               draggable: true,  
  58.               map: map  
  59.     });  
  60.     google.maps.event.addListener(markerPoint, 'drag', function() {  
  61.         isPointInPolygon();  
  62.         //$("#relation").html(markerPoint.getPosition());  
  63.     });  
  64. }   
  65.   
  66. //画多边形,计算多边形面积  
  67. function drawOverlay() {  
  68.     var flightPlanCoordinates = [];  
  69.     if (markersArray) {  
  70.         for (i in markersArray) {  
  71.             flightPlanCoordinates.push(markersArray[i].getPosition());  
  72.         }  
  73.     }  
  74.     polygon = new google.maps.Polygon({  
  75.         path: flightPlanCoordinates,  
  76.         strokeColor: "#FF0000",  
  77.         strokeOpacity: 0.8,  
  78.         strokeWeight: 2,  
  79.         fillColor: "#FF0000",  
  80.         fillOpacity: 0.35  
  81.     });  
  82.   
  83.     if (polygonArray) {  
  84.         for (i in polygonArray) {  
  85.             polygonArray[i].setMap(null);  
  86.         }  
  87.         polygonArray = [];  
  88.     }  
  89.   
  90.     polygon.setMap(map);  
  91.   
  92.   
  93.   
  94.     $("#total_km").empty().html((polygon.getArea()).toFixed(3) + "km²");  
  95.     polygonArray.push(polygon);  
  96. }  
  97.   
  98.   
  99.   
  100. //增加点  
  101. function addMarker(location) {  
  102.     marker = new google.maps.Marker({  
  103.         position: location,  
  104.         map: map,  
  105.         icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',  
  106.         draggable: true  
  107.     });  
  108.     markersArray.push(marker);  
  109.   
  110.     drawOverlay();  
  111.   
  112.     google.maps.event.addListener(marker, 'drag', function() {  
  113.         drawOverlay();  
  114.     });  
  115.   
  116. }  
  117.   
  118. //顶点信息  
  119. function viewVertex() {  
  120.     if (markersArray) {  
  121.         $("#vertexInfo").empty();  
  122.         for (i in markersArray) {  
  123.             var point = markersArray[i].getPosition();  
  124.             $("#vertexInfo").append("var p" + i + " = new google.maps.LatLng" + point + ";<br />");  
  125.         }  
  126.         for (i in markersArray) {  
  127.             $("#vertexInfo").append("points.push(p" + i + ");<br />");  
  128.         }  
  129.     }  
  130. }  
  131.   
  132. //清空地图  
  133. function clearOverlays(infowindow) {  
  134.     if (markersArray) {  
  135.         for (i in markersArray) {  
  136.             markersArray[i].setMap(null);  
  137.         }  
  138.         markersArray.length = 0;  
  139.     }  
  140.   
  141.     if (polygonArray) {  
  142.         for (i in polygonArray) {  
  143.             polygonArray[i].setMap(null);  
  144.         }  
  145.         polygonArray = [];  
  146.     }  
  147.   
  148.     $("#total_km").empty();  
  149. }  
  150.   
  151.   
  152. function FC(x1, x2) {  
  153.     if (x1 - x2 < 0.000002 && x1 - x2 > -0.000002) {  
  154.         return 1;  
  155.     } else {  
  156.         return 0;  
  157.     }  
  158. }  
  159. /*  
  160. * 参数  
  161. * p1、p2：线段的两个端点  
  162. * p：    被判断点  
  163. * 返回值：  false：点在不在线段上；true：点在线段上  
  164. */  
  165. function isPointOnLine(p1, p2, p) {  
  166.     var x1, y1, x2, y2;  
  167.     x1 = p.lat() - p1.lat();  
  168.     x2 = p2.lat() - p1.lat();  
  169.     y1 = p.lng() - p1.lng();  
  170.     y2 = p2.lng() - p1.lng();  
  171.     if (FC(x1 * y2 - x2 * y1, 0) == 0) {  
  172.         return false;  
  173.     }  
  174.     if ((Math.min(p1.lat(), p2.lat()) <= p.lat() && p.lat() <= Math.max(p1.lat(), p2.lat())) && (Math.min(p1.lng(), p2.lng()) <= p.lng() && p.lng() <= Math.max(p1.lng(), p2.lng()))) {  
  175.         return true;  
  176.     } else {  
  177.         return false;  
  178.     }  
  179. }  
  180.   
  181. // 射向法判断点是否在多边形内部  
  182. function isPointInPolygon() {  
  183.     /*latLngPoints 多边形顶点 */  
  184.     /*latLngPoint  单个顶点*/  
  185.     var latLngPoints = [];  
  186.     var latLngPoint;  
  187.   
  188.     if (markersArray) {  
  189.         for (i in markersArray) {  
  190.             var point = markersArray[i].getPosition();  
  191.                 latLngPoints.push(point);             
  192.         }  
  193.     }  
  194.   
  195.     if (null != markerPoint) {  
  196.             var point = markerPoint.getPosition();  
  197.             latLngPoint = point;  
  198.     }  
  199.   
  200.     if (null == latLngPoints || latLngPoints.length == 0 || null == latLngPoint) {  
  201.         return -1;  
  202.     }  
  203.     var counter = 0;  
  204.     var i;  
  205.     var xinters;  
  206.     var p1 = null;  
  207.     var p2 = null;  
  208.     var isPointOnLineFlag = false;  
  209.     p1 = latLngPoints[0];  
  210.     for (i = 1; i <= latLngPoints.length; i++) { //p2 = latLngPoints + (i % nCount);  
  211.         p2 = latLngPoints[i % latLngPoints.length];  
  212.         if (isPointOnLine(p1, p2, latLngPoint)) {  
  213.             isPointOnLineFlag = true;  
  214.         }  
  215.         if (latLngPoint.lng() > Math.min(p1.lng(), p2.lng())) {  
  216.             if (latLngPoint.lng() <= Math.max(p1.lng(), p2.lng())) {  
  217.                 if (latLngPoint.lat() <= Math.max(p1.lat(), p2.lat())) {  
  218.                     if (p1.lng() != p2.lng()) {  
  219.                         xinters = (latLngPoint.lng() - p1.lng()) * (p2.lat() - p1.lat()) / (p2.lng() - p1.lng()) + p1.lat();  
  220.                         if ((p1.lat() == p2.lat()) || (latLngPoint.lat() < xinters) || (latLngPoint.lat() == xinters)) {  
  221.                             counter++;  
  222.                         }  
  223.                     }  
  224.                 }  
  225.             }  
  226.         }  
  227.         p1 = p2;  
  228.     }  
  229.     if (isPointOnLineFlag) {  
  230.         $("#relation").html("<b style='color:blue'>点在边上b>");  
  231.         return true;  
  232.     }  
  233.     if (counter % 2 == 0) {  
  234.         $("#relation").html("<b style='color:red'>点在多边形外b>");  
  235.         return false;  
  236.     } else {  
  237.         $("#relation").html("<b style='color:green'>点在多边形内b>")  
  238.         return true;  
  239.     }  
  240. }  
  241.   
  242.   
  243.   
  244. script>  
  245. body>  
  246. html> 
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)