自定義點與地圖覆蓋物上的關系判斷處理

本文轉載自查看原文 2015-10-19 14:34 2207 javascript
<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="點在矩形內" onclick="ptInRect()" /></td>
            <td><input type="button" value="點在矩形外" onclick="ptOutRect()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">點與圓形的關系: </td>
        </tr>
        <tr>            
            <td><input type="button" value="點在圓形內" onclick="ptInCircle()" /></td>
            <td><input type="button" value="點在圓形外" onclick="ptOutCircle()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">計算折線長度: </td>
        </tr>
        <tr>            
            <td><input type="button" value="參數為折線" onclick="computeLenByPolyine()" /></td>
            <td><input type="button" value="參數為點數組" onclick="computeLenByArray()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">計算多邊形面積: </td>
        </tr>
        <tr>            
            <td><input type="button" value="參數為多邊形" onclick="computeAreaByPolygon()" /></td>
            <td><input type="button" value="參數為點數組" onclick="computeAreaByArray()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">判斷點是否在折線上: </td>
        </tr>
        <tr>            
            <td><input type="button" value="點在折線上" onclick="ptOnPolyline()" /></td>
            <td><input type="button" value="點在折線外" onclick="ptOutPolyline()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">判斷點是否在多邊形內: </td>
        </tr>
        <tr>            
            <td><input type="button" value="點在多邊形內" onclick="ptInPolygon()" /></td>
            <td><input type="button" value="點在多邊形外" onclick="ptOutPolygon()" /></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);
map.centerAndZoom(pt, 16);

map.enableScrollWheelZoom();//開啟滾動縮放
map.enableContinuousZoom();//開啟縮放平滑

//點在矩形內
function ptInRect(){    
    var pt = new BMap.Point(116.404, 39.915);//測試點

    var pt1 = new BMap.Point(116.400, 39.910);//西南腳點
    var pt2 = new BMap.Point(116.410, 39.920);//東北腳點
    var bds = new BMap.Bounds(pt1, pt2); //測試Bounds對象
        
    var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
    if(result == true){
        alert("點在矩形內");
    } else {
        alert("點在矩形外")
    }

    //演示：將點與矩形添加到地圖上
    map.clearOverlays();    
    var mkr = new BMap.Marker(pt);
    var pts = [];
    //bds的四個腳點坐標
    var leftTop = new BMap.Point(pt1.lng, pt2.lat);
    var rightTop = new BMap.Point(pt2.lng, pt2.lat);
    var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
    var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
    pts.push(leftTop);
    pts.push(rightTop);
    pts.push(rightBottom);
    pts.push(leftBottom);
    var rect = new BMap.Polygon(pts);
    map.addOverlay(mkr);//添加測試點
    map.addOverlay(rect);//添加測試矩形    
    
}

//點在矩形外
function ptOutRect(){
    var pt = new BMap.Point(116.398, 39.915);//測試點

    var pt1 = new BMap.Point(116.400, 39.910);//西南腳點
    var pt2 = new BMap.Point(116.410, 39.920);//東北腳點
    var bds = new BMap.Bounds(pt1, pt2); //測試Bounds對象
        
    var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
    if(result == true){
        alert("點在矩形內");
    } else {
        alert("點在矩形外")
    }

    //演示：將點與矩形添加到地圖上
    map.clearOverlays();    
    var mkr = new BMap.Marker(pt);
    var pts = [];
    //bds的四個腳點坐標
    var leftTop = new BMap.Point(pt1.lng, pt2.lat);
    var rightTop = new BMap.Point(pt2.lng, pt2.lat);
    var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
    var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
    pts.push(leftTop);
    pts.push(rightTop);
    pts.push(rightBottom);
    pts.push(leftBottom);
    var rect = new BMap.Polygon(pts);
    map.addOverlay(mkr);//添加測試點
    map.addOverlay(rect);//添加測試矩形     
}

//點在圓內
function ptInCircle(){
    var pt = new BMap.Point(116.404, 39.915);//測試點
    var c = new BMap.Point(116.404, 39.915); //圓心 
    var circle = new BMap.Circle(c, 500);//測試圓
        
    var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
    if(result == true){
        alert("點在圓形內");
    } else {
        alert("點在圓形外")
    }

    //演示：將點與圓形添加到地圖上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(circle);
}

//點在圓外
function ptOutCircle(){
    var pt = new BMap.Point(116.396, 39.915);//測試點
    var c = new BMap.Point(116.404, 39.915); //圓心 
    var circle = new BMap.Circle(c, 500);//測試圓        
    
    var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
    if(result == true){
        alert("點在圓形內");
    } else {
        alert("點在圓形外")
    }

    //演示：將點與圓形添加到地圖上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(circle);
}

//計算長度，參數為折線
function computeLenByPolyine(){    
    var pts = [];
    var pt1 = new BMap.Point(116.400,39.910);
    var pt2 = new BMap.Point(116.402,39.912);
    var pt3 = new BMap.Point(116.403,39.914);
    var pt4 = new BMap.Point(116.404,39.917);
    var pt5 = new BMap.Point(116.406,39.918);
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);

    var ply = new BMap.Polyline(pts);    
    var dis = BMapLib.GeoUtils.getPolylineDistance(ply);
    alert("共" + dis.toFixed(2) + "米");
    
    //演示：將線添加到地圖上
    map.clearOverlays();
    map.addOverlay(ply);
}

//計算長度，參數為點數組
function computeLenByArray(){
    var pts = [];
    var pt1 = new BMap.Point(116.400,39.910);
    var pt2 = new BMap.Point(116.402,39.912);
    var pt3 = new BMap.Point(116.403,39.914);
    var pt4 = new BMap.Point(116.404,39.917);
    var pt5 = new BMap.Point(116.406,39.918);
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);
        
    var dis = BMapLib.GeoUtils.getPolylineDistance(pts);
    alert("共" + dis.toFixed(2) + "米");
    
    //演示：將線添加到地圖上
    var ply = new BMap.Polyline(pts, {strokeColor: "red", strokeStyle:"dashed"});
    map.clearOverlays();
    map.addOverlay(ply);        
}

//計算面積，參數為多邊形
function computeAreaByPolygon(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.918);
    var pt3 = new BMap.Point(116.396, 39.919);
    var pt4 = new BMap.Point(116.404, 39.920);
    var pt5 = new BMap.Point(116.406, 39.913);    
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);    

    var ply = new BMap.Polygon(pts);    
    var area = BMapLib.GeoUtils.getPolygonArea(ply);
    alert("共" + area.toFixed(2) + "平方米"); 
    
    //演示：將面添加到地圖上    
    map.clearOverlays();
    map.addOverlay(ply);  
}

//計算面積，參數為數組
function computeAreaByArray(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.918);
    var pt3 = new BMap.Point(116.396, 39.919);
    var pt4 = new BMap.Point(116.404, 39.920);
    var pt5 = new BMap.Point(116.406, 39.913);    
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);
        
    var area = BMapLib.GeoUtils.getPolygonArea(pts);
    alert("共" + area.toFixed(2) + "平方米"); 
    
    //演示：將面添加到地圖上
    var ply = new BMap.Polygon(pts, {strokeColor: "red", strokeStyle:"dashed", fillColor:"gray"});    
    map.clearOverlays();
    map.addOverlay(ply);          
}

//點在折線上
function ptOnPolyline(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.405, 39.920);
    var pt3 = new BMap.Point(116.410, 39.920);
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    var ply = new BMap.Polyline(pts);
    
    var pt = new BMap.Point(116.400, 39.915);    
    
    var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
    if(result == true){
        alert("點在折線上");
    } else {
        alert("點在折線外")
    }
    
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);    
    map.addOverlay(mkr);    
    map.addOverlay(ply);   
}

//點在折線外
function ptOutPolyline(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.405, 39.920);
    var pt3 = new BMap.Point(116.410, 39.920);
    
    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    var ply = new BMap.Polyline(pts);
    
    var pt = new BMap.Point(116.401, 39.915);    
    
    var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
    if(result == true){
        alert("點在折線上");
    } else {
        alert("點在折線外")
    }
    
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);    
    map.addOverlay(mkr);    
    map.addOverlay(ply);   
}

//點在多邊形內
function ptInPolygon(){
    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);  
    var ply = new BMap.Polygon(pts);
    
    var pt =new BMap.Point(116.400, 39.914);
    
    var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
    if(result == true){
        alert("點在多邊形內");
    } else {
        alert("點在多邊形外")
    } 
    
    //演示：將面添加到地圖上    
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply);      
}

//點在多邊形外
function ptOutPolygon(){
    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);  
    var ply = new BMap.Polygon(pts);
    
    var pt =new BMap.Point(116.410, 39.915);
    
    var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
    if(result == true){
        alert("點在多邊形內");
    } else {
        alert("點在多邊形外")
    } 
    
    //演示：將面添加到地圖上    
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply); 
}
</script>
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 騰訊地圖JSAPI-在地圖上添加自定義覆蓋物百度地圖API-自定義圖標覆蓋物多個自定義覆蓋物注冊點擊事件，點擊某個覆蓋物后獲得它的坐標百度地圖自定義點聚合高德地圖 - 點聚合自定義樣式百度地圖自定義多個途經點地圖自定義彈窗高德地圖信息窗體鼠標點擊地圖點標記顯示彈窗html 地圖自定義彈窗高德地圖信息窗體鼠標點擊地圖點標記顯示彈窗vue 高德地圖-Vue-amap實現POI搜索+自定義點自定義地圖樣式