jserwang / rc-bmap Goto Github PK

class Bmap extends React.Component {
  state = {
    point: null
  }
  render() {
    const {point} = this.state;
    return (
      <React.Fragment>
        <Map
        center='北京'
        zoom={18}
        placeHolder="地图加载中..."
        >
        <Events click={this.handleMapClick} />
        {point && <Marker>
            <Point {...point} />
          </Marker>}
        </Map>
      </React.Fragment>
    );
  }
  handleMapClick = (e) => {
    console.log(e,'地图单击事件');
    this.setState({
      point: e.point
    })
  }
}

import React from 'react';
import { ReactComponent, Overlay } from 'rc-bmap';
const container = {
  width: 53,
  height: 53,
  border: '3px solid red',
  borderRadius:'50%'
};

@ReactComponent
class CustomOverlay extends Overlay {
  render() {
    return (
      <div style={ container }>
        <img style={{width: 50,height: 50, borderRadius:'50%'}} data-id={this.props.cameraId} alt="" src={this.props.imgSrc} />
      </div>
    );
  }
}

export default CustomOverlay;

window.onClick=()=>{}

 componentDidMount() {
    const { ak } = this.props;
    if (ak) {
      this.getMapScript().then(this.init);
    } else if (global.BMap) {
      this.init(global.BMap);
    } else {
      console.warn('BMap is undefined');
    }
  }

componentDidMount() {
  const { ak } = this.props;
  if (global.BMap) {
    this.init(global.BMap);
  }
  else if (ak) {
    this.getMapScript().then(this.init);
  }
  else {
    console.warn('BMap is undefined');
  }
}

<Boundary
      name="绵阳市" // 地图会加载另一个很小区域的边界
      autoViewport
      strokeColor="blue"
      fillColor="red"
      strokeWeight={5}
      strokeOpacity={0.5}
      fillOpacity={0.9}
      strokeStyle="dashed"
    />

const ridingRoute = new RidingRoute();
    ridingRoute.location = '北京市';
    const startPoint = { lng: 116.288434, lat: 40.054741 };
    const endPoint = { lng: 116.306293, lat: 40.052532 };
    ridingRoute.search(startPoint, endPoint);
    ridingRoute.onSearchComplete(result => {
      const plan = result.getPlan(0);
      console.log('第一条方案', plan);
      console.log('当前方案距离', plan.getDistance());
      console.log('当前方案耗时', plan.getDuration());
      const route = plan.getRoute(0);
      // console.log('当前路线', plan.getRoute(0));
      // console.log('坐标集合', route.getPath());
      this.setState({ points: route.getPath() });
    });

handleName=()=>{
  this.setState({
   name:'北京市朝阳区'
  })
  console.log(" name:北京市朝阳区");
}

<button className="butt" onClick={this.handleName}></button>

import React, { Component } from 'react';
import { Map,Boundary} from 'rc-bmap';
import './App.css';
class App extends Component {
constructor(props){
  super(props)
  this.state={
    name:'杭州市萧山区',
    onError:() => {    
      console.log('onError');
    },
    autoViewport:true,
    strokeColor:"blue",
    fillColor:"red",    
    strokeWeight:5,
    strokeOpacity:0.5,
    fillOpacity:0.9,
    strokeStyle:"dashed",
    massClear:false,
    editing:false,
    clicking:true,
    events:{
      click() {
        console.log('Boundary click');
      }
    }
  }
}
handleName=()=>{
  this.setState({
   name:'北京市朝阳区'
  })
  console.log(" name:北京市朝阳区");
}
handleOnError =()=>{
  this.setState({
    onError:()=>{
      console.log("onError");
      
    }
  })
}

handleAutoViewport =()=>{
  this.setState({
    autoViewport:true
  })
  console.log(" autoViewport:true");
  
}

handleStrokeColor =()=>{
  this.setState({
    strokeColor:"red"
  })
  console.log("  strokeColor:red");
}

handleFillColor =()=>{
  this.setState({
    fillColor:"blue"
  })
  console.log("   fillColor:blue");
}

handleStrokeWeight =()=>{
  this.setState({
    strokeStyle:10
  })
  console.log("  strokeStyle:10");
}

handleStrokeOpacity =()=>{
  this.setState({
    strokeOpacity:0.1
  })
  console.log("strokeOpacity:0.1");
}

handleStrokeStyle =()=>{
  this.setState({
    strokeStyle:"solid"
  })
  console.log("  strokeStyle:solid");
}
handleMassClear=()=>{
  this.setState({
    massClear:true
  })
  console.log("massClear:true");
}

handleEditing=()=>{
  this.setState({
    editing:true
  })
  console.log("editing:true");
}


handleClicking=()=>{
  this.setState({
    clicking:false
  })
  console.log(" clicking:false");
}


handleEvents=()=>{
  this.setState({
    
  })
  console.log("");
}






  render() {

    const {name,onError,autoViewport,strokeColor,fillColor,strokeWeight,strokeOpacity,fillOpacity,strokeStyle,massClear,editing,clicking,events}=this.state;
    return (
      <div className="App">
          <Map
    ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
  >
    <Boundary
      name={name} // 行政区域名字
      onError={onError} // 初始化失败回调
      autoViewport={autoViewport} // 添加完成后是否自动移动
      strokeColor={strokeColor} // 边线颜色
      fillColor={fillColor} // 填充颜色。当参数为空时，圆形将没有填充效果
      strokeWeight={strokeWeight} // 边线的宽度，以像素为单位
      strokeOpacity={strokeOpacity} // 边线透明度，取值范围0 - 1
      fillOpacity={fillOpacity} // 填充的透明度，取值范围0 - 1
      strokeStyle={strokeStyle} // 边线的样式，solid或dashed
      massClear={massClear} // 是否在调用map.clearOverlays清除此覆盖物，默认为true
      editing={editing} // 是否启用线编辑，默认为false
      clicking={clicking} // 是否响应点击事件，默认为true
      events={events} // 绑定事件
    ></Boundary>
  </Map>
  
  <button className="butt" onClick={this.handleName}></button>
  <button className="butt" onClick={this.handleOnError}></button>
  <button className="butt" onClick={this.handleAutoViewport}></button>
  <button className="butt" onClick={this.handleStrokeColor}></button>
  <button className="butt" onClick={this.handleFillColor}></button>
  <button className="butt" onClick={this.handleStrokeWeight}></button>
  <button className="butt" onClick={this.handleStrokeOpacity}></button>
  <button className="butt" onClick={this.handleStrokeStyle}></button>
  <button className="butt" onClick={this.handleMassClear}></button>
  <button className="butt" onClick={this.handleEditing}></button>
  <button className="butt" onClick={this.handleClicking}></button>
  <button className="butt" onClick={this.handleEvents}></button>

      </div>
    );
  }

}

export default App;

   {data.companys.edges.map(item => (
                                    <Marker key={item.node.id}>
                                        <Events click={this.handleClick.bind(this, item)} />
                                        <Point lng={item.node.location.lng} lat={item.node.location.lat} />
                                        <Label style={{
                                            border: 'none',
                                            backgroundColor: 'rgba(0,0,0,0)',
                                            fontSize: '12px',
                                            color: '#C9D4DF',
                                            fontFamily: 'PingFangSC-Medium',
                                            fontWeight: '400',
                                            height: '20px',
                                            lineHeight: '20px'
                                        }}>
                                            <Size name="offset" width="30" height="0" />
                                            <Content>
                                                <span>{item.node.companyName}</span>
                                                <span style={{
                                                    width: '70px',
                                                    height: '20px',
                                                    backgroundColor: 'rgba(102,146,255,1)',
                                                    display: positionNumActice ? 'inline-block' : 'none',
                                                    borderRadius: '12px',
                                                    marginLeft: '8px',
                                                    fontSize: '12px',
                                                    fontWeight: '400',
                                                    color: '#060024',
                                                    textAlign: 'center',
                                                    lineHeight: '20px'

                                                }}>职位：{item.node.num}</span>

                                            </Content>
                                        </Label>
                                        <Icon
                                            imageUrl={logo1}
                                            imageSize={{ width: '24', height: '24' }}
                                        >
                                            <Size width="24" height="24" />
                                        </Icon>
                                    </Marker>

                                ))}