百度地图叠加扇形区域，也可以做成异性区域-优快云博客

本文介绍如何使用百度地图API实现地图上指定位置的扇形区域绘制，并通过JavaScript自定义函数实现不同方向的扇形区域覆盖，适用于地理信息系统开发中特定区域标记的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uIGNq6dLthEQ5iM5G8mNfCl1BDDfWx9d"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</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, 13);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var markers = [];
    function Sector1(point2, radius, sDegree, eDegree, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {
        var points = [];
        var step = ((eDegree - sDegree) / 4) || 4;
        points.push(point2);
        for ( var i = sDegree; i < eDegree + 0.01; i += step) {
            points.push(EOffsetBearing(point2, radius, i));
        }
        points.push(point2);
        var polygon = new BMap.Polygon(//Polygon方法接受大量点后，可以合成任意图形
                points
                , {strokeColor:strokeColour, strokeWeight:strokeWeight, strokeOpacity:Strokepacity, fillColor: fillColour, fillOpacity:fillOpacity});

        return polygon;
    }

    function EOffsetBearing(point3, dist, bearing) {
        var latConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 5;
        var lngConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 3;
        var lat = dist * Math.cos(bearing * Math.PI / 180) / latConv;
        var lng = dist * Math.sin(bearing * Math.PI / 180) / lngConv;
        return new BMap.Point(point3.lng + lng, point3.lat + lat);
    }

    var points = new BMap.Point(116.404, 39.915);
    var polygon2 = Sector1(points, 4000, 0, 90, "#000000", 3, 0.5, "#00ff00", 0.5);
    map.addOverlay(polygon2);
    var polygon2 = Sector1(points, 4000, 90, 180, "#000000", 3, 0.5, "#00ff00", 0.5);
    map.addOverlay(polygon2);
    var polygon2 = Sector1(points, 4000, 180, 270, "#000000", 3, 0.5, "#00ff00", 0.5);
    map.addOverlay(polygon2);
    var polygon2 = Sector1(points, 4000, 270, 360, "#000000", 3, 0.5, "#00ff00", 0.5);
    map.addOverlay(polygon2);
    
</script>