通过这个博主的博客https://www.cnblogs.com/zhengxiaoqing/p/5038241.html,了解到怎么实现这个效果。

安装好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());    //调整视野
  });
},
Logo

前往低代码交流专区

更多推荐