百度地图部分功能记录

初始化Map

引入 React-bmap inmap

        <Map
          center={{ lng: 101.54615, lat: 25.0329 }}//中心坐标点
          zoom="16"//缩放等级
          ref={node => { /绑定map示例
            this.map = node;
          }}
        ></Map>

初始化Map

import inMap from 'inmap';  
import { Map } from 'react-bmap';

//inMap文档  http://inmap.talkingdata.com/#/docs/v2/introduce
componentDidMount() {
    const {
      handleZoom,
      map: { map: inmap },
    } = this;
    inmap.enableScrollWheelZoom(true);//开启滚轮缩放
    inmap.setMinZoom(3);//设置最小缩放级别
    inmap.setMaxZoom(100);//设置最大缩放级别
    inmap.addEventListener('zoomend', function() {});//监听地图缩放事件
    inmap.setMapStyle({
      styleJson: myStyleJson,//设置地图样式
    });
    // inmap.setMapStyleV2({
    //   styleId: '',//百度地图个性化编辑
    // });
    this.setupWarehouseImageOverlay([], inmap);//创建图片覆盖物
  }

百度地图默认样式编辑

简单样式编辑json
百度地图开发平台详细样式编辑

创建图片标记点击开启弹框

 setupWarehouseImageOverlay = (data, inmap) => {
    const img = new Image();
    img.src =
      'https://bucket-cannabis.oss-cn-hangzhou.aliyuncs.com/static/big-screen/%E5%8E%9F%E6%96%99%E4%BB%93.png'; //展示图片
    const imgOverlay = new inMap.ImgOverlay({//创建一个图片图层对象
    //具体配置 http://inmap.talkingdata.com/#/docs/v2/ImgOverlay
      tooltip: {//划过显示文字信息
        show: true,
        formatter: '{你好}',
      },
      style: {
        normal: {//icon 信息
          icon: img,
          width: 22.6,
          height: 23.04,
          offsets: {
            top: '-50%',
            left: '-50%',
          },
        },
      },
      data,//数据
      event: {
        onMouseClick: (item, event) => {//点击事件
          this.map.map.centerAndZoom(new BMap.Point(0,0,16);//控制地图中心点
            this.infoWindow = new BMap.InfoWindow(`<div>展示信息</div>`,{
              width: 300,//信息框宽度
              height: 250,//信息框高度
              title: '大家好',
            });
            //开启信息框	
            this.map.map.openInfoWindow(this.infoWindow,
              new BMap.Point(0,0,); //开启信息窗口
        },
      },
    });
    inmap.addOverlay(imgOverlay);	
    this.setState({
      WarehouseImgOverlay: imgOverlay,
    });
  };
  // this.state.WarehouseImgOverlay.setData({{
            style: {
              color: "#333",
              size: 8,
            },
            geometry: {
              coordinates: [x,y],
              type: 'Point',
            },
            properties:{}
          };});

点之间线条连线

 addLine = data => {
    let arr = [];
    console.log(data);
    arr = data.map(item => {
      console.log(item);
      return new BMap.Point(0, 0);
    });
    var curve = new BMap.Polyline(arr, {
      strokeColor: 'rgb(173,134,11)',
      strokeWeight: 2,
      strokeOpacity: 1,
    }); //创建直线对象
    this.map.map.addOverlay(curve);
  };

获取行政区范围 （圈出行政区）

 getCx() {
    const that = this;
    var bdary = new BMap.Boundary();
    // console.log(bdary, '123123211312');
    bdary.get('楚雄彝族自治州', function(rs) {
      //获取行政区域
      // map.clearOverlays();        //清除地图覆盖物
      var count = rs.boundaries.length; //行政区域的点有多少个
      for (var i = 0; i < count; i++) {
        var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: '#0af8ee' }); //建立多边形覆盖物
        ply.setFillColor('');
        that.map.map.addOverlay(ply); //添加覆盖物
        // that.map.map.setViewport(ply.getPath()); //调整视野
      }
    });
  }

清除地图覆盖物

     const allOverlay = this.map.map.getOverlays();
      for (const item of allOverlay) {
        console.log(item);//清楚你想要清楚的覆盖物
          this.map.map.removeOverlay(item);
      }
      //this.map.map.clearOverlays();清楚全部覆盖物

infoWindow样式修改

  /*地图标题*/
  .BMap_bubble_title {
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    padding-top: 5px;
    border: 2px solid rgb(173, 134, 11);
    border-bottom: none;
    background-color: black;
  }
  /* 消息内容 */
  .BMap_bubble_content {
    background-color: white;
    padding: 0;
  }
  /* 内容 */
  .BMap_pop div:nth-child(9) {
    top: 35px !important;
    // border-radius:7px;
  }
  /* 左上角删除按键 */
  .BMap_pop img {
    top: 43px !important;
    left: 300px !important;
  }
  .BMap_top {
    display: none;
  }
  .BMap_bottom {
    display: none;
  }
  .BMap_center {
    display: none;
  }
  /* 隐藏边角 */

  .BMap_pop div:nth-child(1) div {
    display: none;
  }
  .BMap_pop div:nth-child(3) {
    display: none;
  }
  .BMap_pop div:nth-child(5) {
    display: none;
  }
  .BMap_pop div:nth-child(7) div {
    display: none;
  }
}

百度地图初始样式JSON

[
  {
    "featureType": "water",
    "elementType": "all",
    "stylers": {
      "color": "#021019"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#147a92"
    }
  },
  {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#0b3d51"
    }
  },
  {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "land",
    "elementType": "all",
    "stylers": {
      "color": "#08304b"
    }
  },
  {
    "featureType": "railway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "railway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#08304b"
    }
  },
  {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
      "lightness": -70
    }
  },
  {
    "featureType": "building",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#857f7f"
    }
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#000000"
    }
  },
  {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
      "color": "#022338"
    }
  },
  {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
      "color": "#062032"
    }
  },
  {
    "featureType": "boundary",
    "elementType": "all",
    "stylers": {
      "color": "#1e1c1c"
    }
  },
  {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
      "color": "#022338"
    }
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "all",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  },
  {
    "featureType": "boundary",
    "elementType": "geometry",
    "stylers": {
      "color": "#0b5394ff",
      "visibility": "on"
    }
  },
  {
    "featureType": "boundary",
    "elementType": "all",
    "stylers": {
      "color": "#f1c232ff"
    }
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
      "color": "#113549ff"
    }
  },
  {
    "featureType": "land",
    "elementType": "all",
    "stylers": {
      "color": "#091220ff"
    }
  }
]