通过这个博主的博客https://www.cnblogs.com/zhengxiaoqing/p/5038241.html，了解到怎么实现这个效果。
【vue百度地图只显示某个省或市的地图，其余部分都不显示】安装好vue-baidu-map后，methods，添加如下方法，并且在mounted中调用该方法
baiduMap() {
var map = new BMap.Map("xjMap");
var cityName = '阿克陶县';
map.centerAndZoom(cityName, 8);
// 初始化地图,设置中心点坐标和地图级别。map.addControl(new BMap.ScaleControl());
// 添加比例尺控件
map.enableScrollWheelZoom();
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) {//获取行政区域
map.clearOverlays();
//清除地图覆盖物
//网上查了下，东西经南北纬的范围
var EN_JW = "180, 90;
";
//东北角
var NW_JW = "-180,90;
";
//西北角
var WS_JW = "-180, -90;
";
//西南角
var SE_JW = "180, -90;
";
//东南角
//4.添加环形遮罩层
var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
strokeColor: "none",
fillColor: "#2F3D54",//修改不想显示的地图颜色
fillOpacity: 1,
strokeOpacity: 0.5
});
//建立多边形覆盖物map.addOverlay(ply1);
//5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(rs.boundaries[0], {
strokeWeight: 2,
strokeColor: "#00f",
fillColor: "#104da7",//显示的地图区域颜色设置
fillOpacity: 1,
});
map.addOverlay(ply);
//map.setViewport(ply.getPath());
//调整视野
});
},推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的（）
- 前端|面试官（谈谈Vue和React的区别（））