百度地圖API 地圖圈區域並計算座標點是否在區域內

時間 2019-11-11

標籤百度地圖 api 區域計算座標是否简体版

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/admin/layer/layer.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LiFSZdkfPQkmwmWGb2gSyzA4b6BESUaP"></script>
    <!--加載鼠標繪製工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
    <!--加載計算工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <!--加載檢索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css">
</head>
<body>
<div style="margin-left: 50px;">
    <lable><input type="text" id="suggestId" placeholder="請輸入關鍵字"></lable>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
<div id="map" style="width:1200px; height: 600px; margin-left: 50px;"></div>
<ul>
    <table>
        <tr>
            <td>序號</td>
            <td>區域名稱</td>
            <td>顏色</td>
            <td>操做</td>
        </tr>
        <foreach name="positionList" item="v" key="k">
            <tr>
                <td><{$k}></td>
                <td><{$v['name']}></td>
　　　　　　　　　　<!--動態設置選定區域的顏色-->
                <td><input type="text" value="<{$v['color']}>" onblur="upColor(<{$v['id']}>,$(this))"><span style="display: inline-block;width: 20px;height:20px;background-color:<{$v['color']}>"></span></td>
                <td>
　　　　　　　　　　　　<!--刪除數據中中的指定區域-->
                    <a src="">刪除</a> </td>
            </tr>
        </foreach>
    </table>
</ul>
</body>
<script>
　　 //更新數據庫中的顏色
    function upColor(id,event){
        var color = event.val();
        var id = id;
        $.ajax({
            url:'<{:U("map/upColor")}>',
            type:'post',
            dataType:'json',
            data:{
                color:color,
                id:id
            },
            success:function(res){
                if(res.status){
                    window.location.reload();
                }

            }
        });
    }

　　
    $(function(){
　　　　　//實例化百度地圖　
        var map = new BMap.Map("map");
        map.enableScrollWheelZoom();   //啓用滾輪放大縮小，默認禁用
        map.enableContinuousZoom();    //啓用地圖慣性拖拽，默認禁用
        map.centerAndZoom("包頭",15);　　//設置地圖中心和地圖顯示等級
　　　　　//頁面加載前後端請求區域座標點 而且循環在地圖畫出已選定區域　
        $.ajax({
            url:'<{:U("map/poList")}>',
            type:'post',
            dataType:'json',
            success:function(res){
                if(res){
                    console.log(res);
                    var polygon = [];
                    for(var i=0;i<res.length;i++){
                        var arr = [];
                        for(var x=0; x<res[i]['position'].length;x++){
                            let poi = new BMap.Point(parseFloat(res[i]['position'][x].lng),parseFloat(res[i]['position'][x].lat));
                            arr.push(poi);
                        }
                        polygon[i] = new BMap.Polygon(arr,
                            //設置區域樣式
                            {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:res[i]['color'],fillOpacity:0.3}
                        );
                        map.addOverlay(polygon[i]);
                    }
                }

            }
        });

        function G(id) {
            return document.getElementById(id);
        }
        //創建一個自動完成的對象
        var ac = new BMap.Autocomplete({
            "input" : "suggestId",
            "location" : map
        });
        ac.addEventListener("onhighlight", function(e) {  //鼠標放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠標點擊下拉列表後的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地圖上全部覆蓋物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //獲取第一個智能搜索的結果
                map.centerAndZoom(pp, 16);
                map.addOverlay(new BMap.Marker(pp));    //添加標註
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }


        //右鍵菜單
        var menu = new BMap.ContextMenu();
        var item1=new BMap.MenuItem("撤銷" ,function(location){ map.removeOverlay(overlays[overlays.length-1]);overlays.splice(overlays.length-1,1) });
        menu.addItem(item1);
        map.addContextMenu(menu);
        var overlays = [];
        var overlaycomplete = function(e){
            var position = [];
            overlays.push(e.overlay);
            //獲取多邊形端點座標  
            // if (e.drawingMode == BMAP_DRAWING_RECTANGLE ) {
            //alert(' 所畫的點個數：' + e.overlay.getPath().length);  
            for(var i=0;i<e.overlay.getPath().length;i++){
                let coordinate = new Object();
                coordinate.lng = e.overlay.getPath()[i].lng;
                coordinate.lat = e.overlay.getPath()[i].lat;
                position.push(coordinate);
                // alert(" 點"+(i+1)+":經度"+e.overlay.getPath()[i].lng+" 緯度："+e.overlay.getPath()[i].lat);
            }
            //prompt層

            // alert("面積："+BMapLib.GeoUtils.getPolygonArea(e.overlay));
            // }
            //關閉繪製模式
            drawingManager.close();
            layer.prompt(
                {title: '添加區域名稱'},
                function(val, index){
                    if(val!==''){
                        $.ajax({
                            url:'<{:U("map/pushPosition")}>',
                            type:'post',
                            dataType:'json',
                            data:{
                                position:JSON.stringify(position),
                                name:val
                            },
                            success:function(res){
                                if(res.status){
                                    layer.close(index);
                                    window.location.reload();
                                }

                            }
                        });
                    }else{
                        layer.close(index);
                    }
                }
            );

        };
        //繪製樣式
        var styleOptions = {
            strokeColor:"red",    //邊線顏色。  
            fillColor:"red",      //填充顏色。當參數爲空時，圓形將沒有填充效果。  
            strokeWeight: 3,       //邊線的寬度，以像素爲單位。  
            strokeOpacity: 0.8,    //邊線透明度，取值範圍0 - 1。  
            fillOpacity: 0.6,      //填充的透明度，取值範圍0 - 1。  
            strokeStyle: 'solid' //邊線的樣式，solid或dashed。  
        };
        //實例化鼠標繪製工具  
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否開啓繪製模式  
            enableDrawingTool: true, //是否顯示工具欄  
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
                offset: new BMap.Size(5, 5), //偏離值
                drawingModes: [//畫覆蓋物工具欄上顯示的可選項
                    BMAP_DRAWING_MARKER,
                    BMAP_DRAWING_CIRCLE,
                    BMAP_DRAWING_POLYLINE,
                    BMAP_DRAWING_POLYGON,
                    BMAP_DRAWING_RECTANGLE
                ]
            },
            circleOptions: styleOptions, //圓的樣式  
            polylineOptions: styleOptions, //線的樣式  
            polygonOptions: styleOptions, //多邊形的樣式  
            rectangleOptions: styleOptions //矩形的樣式  
        });
        //添加鼠標繪製工具監聽事件，用於獲取繪製結果  
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
        function clearAll() {
            for(var i = 0; i < overlays.length; i++){
                map.removeOverlay(overlays[i]);
            }
            overlays.length = 0
        }
　　　　  //座標點
　　　　　var lng,lat;

　　　　　point = [
   　　　　  new BMap.Point(lng,lat),
　　　　  ];
　　　　　　
         //計算座標point 是否在polygon區域中 接口使用請查看百度地圖api

　　　　　BMapLib.GeoUtils.isPointInPolygon(point[0],polygon[i]);

　 }) </script> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。