小白初试，这里用广西省为例,但是感觉百度地图加载属实有点慢=。=
以下是完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="https://api./api?type=webgl&v=1.0&ak=TLjkUDAFsU0vyG7dVn6f8Hbx165SCELO"></script><script type="text/javascript" src="/v1/mapopen/api-demos/data/province.js"></script><script src="/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js"></script><script src="/v1/mapopen/cms/bmapgldemo/custom/mapstyleblack.js"></script><title>广西壮族自治区</title><style>html,body,#container {width: 100%;height: 100%;overflow: hidden;margin: 0;padding: 0}.info {z-index: 999;width: auto;padding: 10px;margin-left: 10px;position: fixed;top: 10px;background-color: #fff;border-radius: 5px;font-size: 14px;color: #666;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.selbox {margin: 8px 0;}select {width: 180px;height: 30px;border: 1px solid #ddd;}</style></head><body><div id="container"></div><script>var map = new BMapGL.Map('container');map.centerAndZoom(new BMapGL.Point(108.51, 23.32), 7); //设置中心点经纬度map.enableScrollWheelZoom();var zoomCtrl = new BMapGL.ZoomControl();map.addControl(zoomCtrl);// --- 添加行政区划 ---var dist = new BMapGL.DistrictLayer({name: '(广西壮族自治区)',kind: 1,fillColor: '#618bf8',fillOpacity: 1,strokeColor: '#daeafa',viewport: true});map.addDistrictLayer(dist);var point = new BMapGL.Point(107.45, 22.13); //坐标点经纬度//标注点var myicon = new BMapGL.Icon('./th?id=OIP-C.v1RFlHRBreDq34Vxbj37PAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2', // 百度图片new BMapGL.Size(40,40), // 视窗大小{// imageSize: new BMapGL.Size(144,92), // 引用图片实际大小// imageOffset:new BMapGL.Size(-10,0) // 图片相对视窗的偏移})var marker = new BMapGL.Marker(point,{icon:myicon})map.addOverlay(marker); //添加标注点//添加遮罩层隐藏别的地区var bdary = new BMapGL.Boundary();bdary.get('广西壮族自治区', function (rs) {// 绘制行政区for (var i = 0; i < rs.boundaries.length; i++) {var path = [];var xyArr = rs.boundaries[i].split(';');var ptArr = [];for (var j = 0; j < xyArr.length; j++) {var tmp = xyArr[j].split(',');var pt = new BMapGL.Point(tmp[0], tmp[1]);ptArr.push(pt);}var mapmask = new BMapGL.MapMask(ptArr, {isBuildingMask: true,isPoiMask: true,isMapMask: true,showRegion: 'inside',topFillColor: '#5679ea',topFillOpacity: 0.5,sideFillColor: '#5679ea',sideFillOpacity: 0.9});map.addOverlay(mapmask);var border = new BMapGL.Polyline(ptArr, {strokeColor: 'red',strokeWeight: 3,strokeOpacity: 1});map.addOverlay(border);}})// --- 行政区划添加鼠标事件 ---dist.addEventListener('mouseover', function (e) {e.currentTarget.setFillColor('#9169db');});dist.addEventListener('mouseout', function (e) {e.currentTarget.setFillColor(e.currentTarget.style.fillColor);});</script></body></html>
然后设置地图不可缩放，不可拖拽即可。感觉这种方案并不是最佳方案，但是因为本人也是小白初试，很多地方还是做得不足,只能凑合用一下。
修改省份即可切换别的省，记得同时设置中心点，不然会出现遮罩层不出现或者其他bug.
