百度地图JS只显示一个省

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

牟云飞

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

阅读量3.1w

点赞数 5

分类专栏：地图 ECHARTS echart 文章标签：地图只显示一个省

地图同时被 3 个专栏收录

14 篇文章 3 订阅

订阅专栏

ECHARTS

9 篇文章 0 订阅

订阅专栏

echart

7 篇文章 0 订阅

订阅专栏

转载地址：http://www.cnblogs.com/wondergx/p/5305602.html

效果图：

<!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=这里填写开发者密钥"></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();//禁止双击缩放
var blist = [];
var districtLoading = 0;

function getBoundary() {   
  
    	
    addDistrict("广州越秀区");
    addDistrict("广州从化区");
    addDistrict("广州荔湾区");
    addDistrict("广州天河区");
    addDistrict("广州白云区");
  	addDistrict("广州黄埔区");
  	addDistrict("广州花都区");
  	addDistrict("广州番禺区");
  	addDistrict("广州南沙区");
    addDistrict("广州海珠区");
    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();
        }
    });
}


/**
 * 各种鼠标事件绑定
 */
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>