百度地图之添加行政区划 添加遮罩层 并添加街道标记 点击显示街道信息 去除百度地图logo

效果图

添加Map实例，并添加控件，中心坐标为你要显示的区域的中心

var map = new BMap.Map("streetMap");  //创建地图实例
var point = new BMap.Point(121.456943, 31.174838);
map.centerAndZoom(point, 12); //设置地图中心坐标和地图大小级别
var opts = {
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_ZOOM,
        offset: new BMap.Size(1, 1) //放大缩小位置
            };
map.addControl(new BMap.NavigationControl(opts)); //添加可以放大缩小的控件

画行政区、添加遮罩

function getBoundary() {
        var bdary = new BMap.Boundary();
        bdary.get("上海市徐汇区", function(rs) {     //获取行政区
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
            alert("未能获取当前输入行政区域");
            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: "#ff0000"             轮廓颜色
            });
            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: 0.0000001,
            strokeColor: "#ff0000",
            strokeWeight: 0.00001
          });
          map.addOverlay(plyall); //建立多边形覆盖物
        });
      }
      getBoundary();     //调用该函数

添加窗口信息（点击触发）

 var opts = { width: 230, height: 10, title: "", enableMessage: true };
      //  信息窗口函数
 function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);   //创建窗口对象
        map.openInfoWindow(infoWindow, point);   //开启窗口信息
      }

      // 点击触发信息窗口
 function addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
        openInfo(content, e);
        });
      }
      
  var data_info = [];   //用来存放窗口信息
  if (this.mapData) {    //mapData是接口传过来的数据，以下根据mapData数据格式进行处理,存放在data_info中
      for (let i = 0; i < this.mapData.length; i++) {
          data_info.push([
            `${this.mapData[i].latitude}`,
            `${this.mapData[i].longitude}`,
            `${this.mapData[i].name}` +
            "（访问人数）</br></br>居住：" +
            `${this.mapData[i].residenceNum}` +
            "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp工作：" +
            `${this.mapData[i].workNum}`
          ]);
        }
      } else {
        console.log("mapData为空或没有返回");
      }
      //添加标注和信息
      for (let i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(
        new BMap.Point(data_info[i][0], data_info[i][1])
        ); //创建标注
        var content = dataInfo[i][2];
        map.addOverlay(marker);
        addClickHandler(content, marker);
      }

去除百度地图logo和水印

// 去除百度地图水印
.anchorBL{      //在全局样式css中添加
  display:none;
}
.BMap_cpyCtrl span{
display:none;
}

It’s OK!