百度地图js api实现区域范围圆圈数量标识效果代码-html代码-BFW代码库

百度地图js api实现区域范围圆圈数量标识效果代码

代码语言：html

所属分类：其他

代码描述：百度地图js api实现区域范围圆圈数量标识效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图区域范围</title>
    <script type="text/javascript" src="//api.map.baidu.com/getscript?v=2.0&ak=DmvaTbVhDI5FzcLmG8zcZQdPllicdMXQ"></script>
</head>
<body>

<div id="XSDFXPage" class="XSDFXPage">

</div>

<style >
    .XSDFXPage {
        width: 920px;
        height: 500px;
    }
</style>
<script>
    // 百度地图API功能
    // 创建Map实例

    var markerPointLevel1 = [
        {
            buildingNum: "123",
            id: 1,
            lat: "30.207036169515438",
            lng: "120.08899292561351",
            name: "西湖区"
        },
        {
            buildingNum: "79",
            id: 2,
            lat: "30.34473201035828",
            lng: "120.15884493257122",
            name: "拱墅区"
        },
        {
            buildingNum: "51",
            id: 3,
            lat: "30.187587607727094",
            lng: "120.19237042945677",
            name: "滨江区"
        },
        {
            buildingNum: "16",
            id: 6,
            lat: "30.2323576392334",
            lng: "120.18012613888587",
            name: "上城区"
        }
    ];

    var data = {
        center: {
            level: 12,
            longitude: 120.154571,
            dimensionality: 30.270801
        },
        setting: {
            cityName: "杭州",
            enableScrollWheelZoom: true,
            imgSize: {
                x: 20,
                y: 50
            },
            param: {
                //说明窗口
                width: 5,
                height: 3,
                title: "高压塔3"
            }
        }
    }
    var map = new BMap.Map("XSDFXPage", { enableMapClick: true });
    const point = new BMap.Point(
        data.center.longitude,
        data.center.dimensionality
    );
    map.centerAndZoom(point, data.center.level);
    // 添加地图类型控件
    map.addControl(new BMap.MapTypeControl());
    // 设置地图显示的城市 此项是必须设置的
    map.setCurrentCity("杭州");
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    /************************************************
     添加工具条、比例尺控件
     *************************************************/
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }));
    map.addControl(new BMap.NavigationControl());
    map.addControl(
        new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
        })
    );
    /************************************************/



    /*覆盖物1级层 zoom<11的时候展示
 --------------------------------*/
    function ComplexCustomOverlay1(point, nums, area, districtId){
        this._point = point;
        this._nums = nums;
        this._area = area;
        this._districtId = districtId;
    }
    ComplexCustomOverlay1.prototype = new BMap.Overlay();

    ComplexCustomOverlay1.prototype.initialize = function(map) {
        this._map = map;
        var div = (this._div = document.createElement("div"));
        var point = this._point;
        div.style.position = "absolute";
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = "rgba(234,41,60,0.8)";
.........完整代码请登录后点击上方下载按钮下载查看