效果图：
步骤：
1，申请百度密钥，步骤不再赘述
2，引入百度地图：pubilc/index.html中引入
<script type="text/javascript" src="http://api./api?v=3.0&ak=你的密钥"></script>
3，添加Map实例，并添加控件，中心坐标为你要显示的区域的中心，画行政区、添加遮罩
<!-- vue 3 引入百度api --><template><div id="streetMap"></div></template><script>import {onMounted} from "vue";export default {setup() {onMounted(() => {initMap(); // 加载百度地图资源});// 初始化地图function initMap() {var map = new BMap.Map("streetMap", {}); //创建地图实例var point = new BMap.Point(113.90598, 35.3718); //新乡市map.centerAndZoom(point, 10); //设置地图中心坐标和地图大小级别map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放map.setMapType(BMAP_HYBRID_MAP); //混合地图map.setMinZoom(8); //设置地图允许的最小级别map.setMaxZoom(15); //设置地图允许的最大级别var opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT,type: BMAP_NAVIGATION_CONTROL_ZOOM,offset: new BMap.Size(1, 1) //放大缩小位置};map.addControl(new BMap.NavigationControl(opts)); //添加可以放大缩小的控件var bdary = new BMap.Boundary();bdary.get("新乡市", function(rs) {//获取行政区var count = rs.boundaries.length; //行政区域的点有多少个 1个if (count === 0) {console.log("未能获取当前输入行政区域");return;}// 给新乡市区之外的区域添加遮罩//定义中国东南西北端点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); // 向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点var pointArray = [];for (var i = 0; i < count; i++) {// 画新乡市区var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, //定义新乡市区轮廓的粗细fillOpacity: 0.1, //遮罩层透明度fillColor: "", //遮罩层颜色 没有代表不覆盖颜色strokeColor: "#f30e25" // 轮廓颜色});map.addOverlay(ply); //添加覆盖物pointArray = pointArray.concat(ply.getPath());pArray = pArray.concat(ply.getPath()); //将点增加到视野范围内pArray.push(pArray[0]); // 将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点}map.setViewport(pointArray); //调整视野var plyall = new BMap.Polygon(pArray, {//新乡市区外的遮罩strokeOpacity: 1,strokeColor: 'none',fillColor: '#033fad', //新乡市区外的遮罩颜色fillOpacity: 0.4, //新乡市区外的遮罩颜色透明度strokeWeight: 0.00001});map.addOverlay(plyall); //建立多边形覆盖物});};return {}},};</script><style scoped>#streetMap {/* // 注意给dom宽高，不然地图不出来 */width: 100%;height: 100vh;}</style>
4，去除百度LOGO，在pubilc/index.html中写入
<style>/* 清除地图LOGO */.BMap_cpyCtrl {display: none;}.anchorBL {display: none;}</style>
