vue百度地图只显示某个省或市的地图,其余部分都不显示

通过这个博主的博客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());    //调整视野
  });
},
  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值