百度地圖繪制扇形

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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 {
            width: 100%;
            height: 500px;
        }
        
        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tb3xO9tSnOggEciyQBO03vEUydIvdTsY"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
    <title>添加橢圓</title>
</head>

<body>
    <div id="allmap"></div>
    <p>在地圖上添加一個橢圓，圓的顏色為藍色、線寬6px、透明度為1，填充顏色為白色，透明度為0.5</p>
</body>
 </html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 10);

//centre:橢圓中心點,X:橫向經度,Y:縱向緯度
function add_oval(centre, x, y) {
    var assemble = new Array();
    var angle;
    var dot;
    var tangent = x / y;
    for(i = 0; i < 36; i++) {
        angle = (2 * Math.PI / 36) * i;
        dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
        assemble.push(dot);
    }
    return assemble;
}

//以畫多邊形區(qū)域的方法畫扇形區(qū)域 畫出以point2點為圓心，半徑為radius，夾角從sDegree到eDegree的扇形
//Sector1(point,300,10,60,"hello")
function Sector1(point2, radius, sDegree, eDegree, opts) {
    var points = []; //創(chuàng)建構成多邊形的點數(shù)組  
    var step = ((eDegree - sDegree) / 10) || 10; //根據(jù)扇形的總夾角確定每步夾角度數(shù)，最大為10  
    points.push(point2);
    for(var i = sDegree; i < eDegree + 0.001; i += step) { //循環(huán)獲取每步的圓弧上點的坐標，存入點數(shù)組 
        points.push(EOffsetBearing(point2, radius, i));
    }
    points.push(point2);
    if(sDegree == eDegree) {
        var planepoint = points[1];
        var myIcon = new BMap.Icon("../images/uav.png",
            new BMap.Size(36, 36));
        var marker = new BMap.Marker(planepoint, {
            icon: myIcon
        });
        var infoWindow = new BMap.InfoWindow("信息:", opts); // 創(chuàng)建信息窗口對象
        marker.addEventListener("click", function() {
            map.openInfoWindow(infoWindow, planepoint); // 開啟信息窗口
            //window.external.Test(sDegree);
        });
        map.addOverlay(marker);
    }
    return points;
}

//使用數(shù)學的方法計算需要畫扇形的圓弧上的點坐標
function EOffsetBearing(point3, dist, bearing) {
    var lngConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 10; //計算1經度與原點的距離
    var latConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 10; //計算1緯度與原點的距離
    var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //正弦計算待獲取的點的緯度與原點緯度差
    var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦計算待獲取的點的經度與原點經度差
    return new BMap.Point(point3.lng + lng, point3.lat + lat);
}

var oval = new BMap.Polygon(Sector1(point,300000,20,60,"hello"), {
    strokeColor: "blue",
    strokeWeight: .9,
    strokeOpacity: 0.5
});
map.addOverlay(oval);
map.enableScrollWheelZoom();  
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());   
</script>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容