先上效果图

百度api只显示部分地图是不能实现的，实现的方式是把外面的部分遮盖住。网上查了好多方法，基本思路是使用api的镂空面绘制 http://lbs.baidu.com/jsdemo.htm#fLoukongPolygon

网上的方法是通过这个api 将绘制的图形的路径点进行修改。里面绘制的多边形是从东南角开始逆时针进行逐个点位链接。再最后一个点位的地方链接回第一个点位形成一个封闭的多边形。因此在最后一个点位的地方进行增加几个点位，让这个封闭的多边形变成外部的。下面是示意图：

这样就画出了一个外部封闭的图形。代码在下面

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script>

这个container 一定要有一个高度和宽度 不然百度地图不显示
<div id="container" style="width:500px;height:500px;"></div>

然后是script

//建立地图
var map = new BMapGL.Map('container', {
    enableDblclickZoom: false,
    displayOptions: {
        building: false
    },
});
//设置中心点
map.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11);
map.enableScrollWheelZoom(true);
map.clearOverlays();

//对地图风格进行一些修改，这里主要是隐藏一些地图中的文字和街道 行政区域的文字
//因为这些信息 我们的多边图是覆盖不了的 只能隐藏地图里面的原有内容

map.setMapStyleV2({styleJson: [.......});

var bd = new BMapGL.Boundary();
bd.get('顺义区', function (rs) {
    // console.log('外轮廓：', rs.boundaries[0]);
    // console.log('内镂空：', rs.boundaries[1]);

    //设置四个角落的经纬度
    var xb = "-180,  90;"
    var db = "180, 90;"
    var dn = "180, -90;"
    var xn = "-180, -90;"


    //4.添加环形遮罩层
    var pointArr = rs.boundaries[0].split(';')
    var lastPoint = pointArr.pop();
    map.clearOverlays();
    var ply1 = new BMapGL.Polygon(rs.boundaries[0] + ";" + dn + xn + xb + db + dn + lastPoint, {
        strokeColor: "none",
        fillColor: "#1C3F75",
        fillOpacity: 1,
        strokeOpacity: 0.5,
        strokeWeight: 0
    });
    //建立多边形覆盖物
    map.addOverlay(ply1);


    //边框
    var hole = new BMapGL.Polygon(rs.boundaries[0], {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: '',
        fillOpacity: 0,
    });
    map.addOverlay(hole);

    // 地图的其他操作
    var marker4 = new BMapGL.Marker(new BMapGL.Point(116.698796, 40.114284));
    map.addOverlay(marker4);
});

写到这里运行一下你会发现可以了。拿去用吧。

最后的最后我想说的是为了这段代码我用了一下午来一边查一边做才出来的。等我出门去吃饭的路上想这个有没有其他简单的方法。然后继续看文档发现这就是个坑。更好的方法看我后面的文章吧。

源代码文件：testmap2.rar