百度地图仅显示一个省并有多个标注点，自定义标注点

最新推荐文章于 2023-04-25 16:49:55 发布

nannanWEB

最新推荐文章于 2023-04-25 16:49:55 发布

阅读量2.8k

点赞数 1

分类专栏：学习随记文章标签：百度地图仅显示一个省百度地图添加多个标注点百度地图添加文字标注百度地图自定义标注点

本文链接：https://blog.csdn.net/nannanWEB/article/details/83897287

版权

学习随记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

百度地图仅显示一个省并有多个标注点

今天拿到一个需求，要求做一个地图，只能显示当前省，并且标注多个点，标注点不能用它自带的红色的标记==；

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e ~~此处填写密钥~~ "></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            height: 100%;
        }
    </style>
</head>

<body>
<div id="container"></div>



<script type='text/javascript'>
    //提示：下面的代码用jquery，所以如果有不能运行的情况请引用后尝试
    //百度地图api container对应前端div名称 前端要引用2.0版本的百度地图api
    //需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
    var map = new BMap.Map("container", { enableMapClick: false }); // 创建地图实例，禁止点击地图底图
    //设置样式
    map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#ffffff",
                    "visibility": "off"
                }
            }
        ]
    });

    // map.disableDragging();//禁止拖动
    // map.disableDoubleClickZoom();//禁止双击缩放
    map.enableScrollWheelZoom(true);
    var blist = [];
    var districtLoading = 0;

    function getBoundary() {
        addDistrict("广西");
    }

    /**
     * 添加行政区划
     * @param {} districtName 行政区划名
     * @returns  无返回值
     */
    function addDistrict(districtName) {
        //使用计数器来控制加载过程
        districtLoading++;
        var bdary = new BMap.Boundary();
        bdary.get(districtName, function (rs) {       //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            for (var i = 0; i < count; i++) {
                blist.push({ points: rs.boundaries[i], name: districtName });
            };
            //加载完成区域点后计数器-1
            districtLoading--;
            if (districtLoading == 0) {
                //全加载完成后画端点
                drawBoundary();
            }
        });
    }

    var point = new BMap.Point(109.020648,23.312585);
    var arrDF = [
        109.020648,23.312585,"南宁洋桥",
        108.316709,22.764052,"南宁古辣",
        108.993439,22.975105,"南宁甘棠",
        108.850473,23.266358,"南宁宾州",
        108.758163,23.216363,"南宁新桥",
        
    ];
     //仅展示部分数据
    map.centerAndZoom(point, 15);
    // 编写自定义函数,创建标注
    function addMarker(point,zd){
        var greenIcon = new BMap.Icon('images/012.png',new BMap.Size(15,15));
        var marker = new BMap.Marker(point,{icon:greenIcon});
        map.addOverlay(marker);
        var label = new BMap.Label(zd,{offset:new BMap.Size(20,-10)});
        label.setStyle({
            color : "#000",
            fontSize : "12px",
            // height : "20px",
            // lineHeight : "20px",
            fontFamily:"微软雅黑",
        })
        marker.setLabel(label);
    }
    // addMarker(point);
    // 随机向地图添加25个标注
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < arrDF.length; i += 3) {
        var point = new BMap.Point(arrDF[i],arrDF[i+1]);
        addMarker(point,arrDF[i+2]);

    }

    /**
     * 各种鼠标事件绑定
     */
    function click(evt) {
        alert(evt.target.name);
    }

    function mouseover(evt) {
        evt.target.label.setZIndex(99);
        evt.target.label.setPosition(evt.point);
        evt.target.label.show();
    }

    function mousemove(evt) {
        evt.target.label.setPosition(evt.point);
    }

    function mouseout(evt) {
        evt.target.label.hide();
    }

    function drawBoundary() {
        //包含所有区域的点数组
        var pointArray = [];

        /*画遮蔽层的相关方法
        *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
        *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 }
        var pNE = { lat: 59.0, lng: 136.0 }
        var pSE = { lat: 3.0, lng: 136.0 }
        var pSW = { lat: 3.0, lng: 73.0 }
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for (var i = 0; i < blist.length; i++) {
            //添加显示用标签层
            var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
            label.hide();
            map.addOverlay(label);

            //添加多边形层并显示
            var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
            ply.name = blist[i].name;
            ply.label = label;
            ply.addEventListener("click", click);
            ply.addEventListener("mouseover", mouseover);
            ply.addEventListener("mouseout", mouseout);
            ply.addEventListener("mousemove", mousemove);
            map.addOverlay(ply);

            //添加名称标签层
            var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
            centerlabel.setPosition(ply.getBounds().getCenter());
            map.addOverlay(centerlabel);

            //将点增加到视野范围内
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);
        }

        //限定显示区域，需要引用api库
        var boundply = new BMap.Polygon(pointArray);
        BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
        map.setViewport(pointArray);    //调整视野

        //添加遮蔽层
        var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物
        map.addOverlay(plyall);
    }

    setTimeout(function () {
        getBoundary();
    }, 100);
</script>
</body>

所展示出来的地图为
在这里插入图片描述