基本的百度地图使用

创建地图

 @observable mapStyle = 'midnight' //地图主题，切换主题时暂存到local
	
 let map = new BMap.Map("demoMap",{  // 创建地图
      minZoom: 4,  // 地图允许展示最小级别
      maxZoom: 19, // 地图允许张氏最大级别
      enableMapClick: false //是否开启底图可点功能
  });
  map.centerAndZoom(new BMap.Point(116.404, 39.915),this.mapZoom);  // 初始化地图坐标 
  map.centerAndZoom('北京',this.mapZoom); //初始化城市　必须跟point 对应
  map.enableScrollWheelZoom(true); // 开启鼠标鼠标滚轮缩放
  map.enableDragging(); // 开启拖拽功能

 // 设置地图样式。
  if(this.mapStyle && this.mapStyle.length > 10) { // 如果切换的是自定义地图，设置样式的方法特殊
    map.setMapStyleV2({ styleId: this.mapStyle }) 
  } else { // 如果切换的是其他样式：午夜蓝、黑夜、卫星、默认
    map.setMapStyle({ style: this.mapStyle }) // 设置地图样式
  }
  if(this.mapStyle == 'special') { // 如果选择的是卫星图
    map.setMapType(BMAP_HYBRID_MAP) // 此地图类型展示卫星视图
  } 
   // 数据循环
   arr.forEach((item ,index)=> { // 循环数据 获取坐标 放到绘制里面
     getBoundary(item)
  })
  // 创建覆盖物
  function getBoundary(citys) {
  	 let bdary = new BMap.Boundary(); // 创建一个区域的边界
  	   bdary.get(citys.city, function(rs){
  	   	let count = rs.boundaries.length;
  	   	 if(count >　0) {  // length 大于 0 的时候说明里面又坐标点
          for( var i = 0; i < count; i++ ){
            // new BMap.Polygon  多边形覆盖物
            let ply = new BMap.Polygon(rs.boundaries[i],{
              strokeWeight: 1, // 边线的宽度
              strokeColor: '#5dbac0', // 边线border的颜色
              strokeOpacity: 0.4 , // 边线透明度
              fillColor: '#5dbac0', // 填充颜色
              fillOpacity: 0.4 // 填充颜色透明度
            });
            // size 宽度和高度创建一个矩形区域大小对象
            let icon = new BMap.Icon(mapCenterPoint, new BMap.Size(20, 20)); //定位中心点的Icon样式
            let marker = new BMap.Marker(convertMapPoint(citys.centerPoint),{
              icon
            }) // 创建一个图像标注实例。point参数指定了图像标注所在的地理位置

            // 添加弹窗
            let msg = `<div id="fullViewMapInfo" class="full-view-map-info"> 
                        <h1>${citys.city}</h1>
                        <p>${citys.score}</p>
                      </div>`
            let mapInfoBox = new BMapLib.InfoBox(map,msg,{
              offset: new BMap.Size(10, 30), // 偏移量
              boxStyle:{  // 定义样式
              },
              closeIconUrl: closeImg, // 关闭按钮的url地址
              enableAutoPan: false,  // 是否启动平移功能
            })
            
            marker.name = ply.name = citys.city; 
            if(ply.name == that.nowCityName ){ // 判断多边形覆盖物城市是否为选中的高亮城市
              ply.setStrokeColor('#fff'); // 折线的颜色
              ply.setStrokeOpacity(1); // 设置透明度
              ply.setStrokeWeight(2); // 边线的宽度
            }
            
            if(map && map.addOverlay){
              let flag = true;
              that.markerArr.forEach(item => {
                if(ply.name == item.name ) {
                  flag = false;
                }
              })
              if(flag) {
                that.markerArr.push(marker); 
                map.addOverlay(marker); // 每个覆盖物添加icon图标 
              }
              map.addOverlay(ply); // 将覆盖物添加到地图上，一个覆盖物实例只能添加一次
            }
            let cityObj = {};
            cityObj.city = citys.city;
            cityObj.ply = ply;
            let isArr = [];
            isArr.push(cityObj);
            let isArr2 = that.plyArr.concat(isArr);
            that.plyArr = isArr2;

            ply.addEventListener('click',function(e) { // 多边形添加监听函数
              mapInfoBox.open(e.point); // 打开 
            });

            marker.addEventListener('click', function(e){ // 点图添加事件监听函数
              that.highLight(e.target.name,true);
            })
          }
        }
	 }
  }
 
 map.clearOverlays(); // 清除地图上所有的覆盖物

改变地图缩放功能

  @action changeMapZoom = (opt) => { 
    if(opt == 'add'){ // 当点击增加按钮的时候 缩放等级放大一级 与否缩小
      this.mapZoom += 1;
      if(this.mapZoom > 19){  
        this.mapZoom = 19;
      }
      this.map.setZoom(this.mapZoom); // 将视图切换到指定的缩放等级，中心点坐标不变
    }  else {
      this.mapZoom -= 1;
      if(this.mapZoom < 4 ){
        this.mapZoom = 4;
      }
      this.map.setZoom(this.mapZoom);
    }
  }

根据鼠标滚轮改变地图缩放

// id  是地图的id   zoom是当前地图的缩放级别
mapWheel = (id, zoom) => {
    document.querySelector(id).onmousewheel = (e) => {
      if(e.wheelDelta > 0) {
        zoom  = map.getZoom() + 1;
        if (zoom > 19) { // 最高 缩放为19  当超出19 也默认为19
          zoom = 19
        }
      } 
      if (e.wheelDelta < 0) {
        zoom = map.getZoom() - 1
        if zoom < 4) {
          zoom = 4
        }
      }
    }
  }