地圖框選區域

時間 2020-09-28
標籤地圖區域简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
        <title>框選地圖</title>
        <style>
            html,body,#container{
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
            }
            button{  
                width:100px; 
                height:30px; 
                border-radius:6px; 
                border:none; 
                position: absolute; 
                bottom: 100px; 
                right: 100px; 
                z-index: 2; 
                background: #0ae; 
                color: #fff; 
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <button onclick="reChoose()">框選地區</button>
        <button onclick="clearred()" style="bottom: 50px;">清除框選</button>
        <script type="text/javascript">
            var map = new BMap.Map("container");//建立地圖實例
            var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point,12);
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    map.addControl(new BMap.NavigationControl());//添加平移縮放控件
                    map.addControl(new BMap.ScaleControl());//添加比例尺控件
                    map.addControl(new BMap.OverviewMapControl());//添加縮略地圖控件
                    map.addControl(new BMap.ScaleControl({ 
                        anchor:BMAP_ANCHOR_BOTTOM_LEFT
                    }));//左下角比例尺
                    map.enableScrollWheelZoom();//啓用滾動輪放大縮小
                    map.enableContinuousZoom();//啓用地圖慣性拖拽，默認禁用
                    map.addControl(new BMap.MapTypeControl());//添加地圖類型控件
                    map.setCurrentCity(r.address.city);//設置地圖顯示城市，此項必須
                }
                else {
                    alert('failed'+this.getStatus());
                }        
            },{enableHighAccuracy: true})
            function bindAreas(){
                var address = prompt("請輸入須要框選的區域")
                var arrAreas = [address];
                for(var i = arrAreas.length - 1;i>=0;i--){
                    var bdary = new BMap.Boundary();
                    var temName = arrAreas[i];
                    bdary.get(temName,function(rs){//獲取行政區域
                        var count = rs.boundaries.length;//行政區域的點有多少個
                        for(var i = 0;i<count;i++){
                            var ply = new BMap.Polygon(rs.boundaries[i],{
                                strokeWeight:2,
                                strokeColor:"#f00"
                            });//創建多邊形覆蓋物
                            ply.setFillOpacity("0");//設置多邊形填充透明度
                            map.addOverlay(ply);//添加覆蓋物
                        }
                    })
                }
            }
            function reChoose(){
                bindAreas()
            }
            function clearred(){
                window.location.reload();
            }
        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。