自封装的react引入使用二维地图组件（内含GPS坐标转换高德地图左边的近似方法）

废话少说，直接干货

AMap（高德地图）

内含GPS坐标转换高德地图左边的近似方法

class AMap extends Component {
  constructor(){
    super();
    this.state = {
      mapCenter: {longitude: 113.77, latitude: 34.75},
      status: {
        zoomEnable: true,
        scrollWheel:false,
        doubleClickZoom:false
      },
      zoom:11,
      startPoints:[],
      endPoints:[],
      rfids:[],
      faces:[],
      loading:[]
    }
  }
  componentWillMount=()=>{
    let timer=setTimeout(()=>{
      if(this.state.init){
        clearTimeout()
      }else{
        this.init()
      }
    },1000)
  }

  state={
      show:null,
      gpsType:"gps"
  }
  init=()=>{
    if(this.props.dataSource){
      this.setState({init:true})
    }else{
      this.setState({init:false})
      return
    }

    // let navigationLine=this.props.dataSource.navigationLine
    // let driverTrip=this.props.dataSource.driverTrip
    // let carTrip=this.props.dataSource.carTrip
    let startPoints=[]
    let endPoints=[]
    let rfids=[]
    let faces=[]
    let loading=[]
    let car

this.props.dataSource.timelineInfos&&this.props.dataSource.timelineInfos.map(item=>{
.....
if(this.props.dataSource.carTrip.length>0){
  let pointcar=this.props.dataSource.carTrip[this.props.dataSource.carTrip.length-1]
  car={longitude:pointcar.longitude+0.00603,latitude:pointcar.latitude+0.001275}
}
})
this.setState({startPoints,endPoints,rfids,faces,loading,mapCenter:car, zoom:9})

  }



  resetBigZoom=()=>{
    if(this.state.zoom<18){
      this.setState({zoom:this.state.zoom+1})
    }
  }
  resetSmallZoom=()=>{
    if(this.state.zoom>3) {
      this.setState({zoom: this.state.zoom - 1})
    }
  }

  render() {
    console.log(this )
    let car=null
    if(this.props.dataSource.carTrip.length>0){
      let pointcar=this.props.dataSource.carTrip[this.props.dataSource.carTrip.length-1]
      car=this.state.gpsType=="gps"?{longitude:pointcar.longitude+0.00603,latitude:pointcar.latitude+0.001275}:pointcar
    }
    return (
      <div className={"w_amap"}>
        <Map amapkey={"2d3828d880fad65924524f0384369550"}
             center={this.state.mapCenter}
             status={this.state.status}

           zoom={this.state.zoom}>

      {this.state.show=="car"&&this.props.dataSource.carTrip.length>0&&<Polyline zIndex="100" visible
         path={this.state.gpsType=="gps"?this.props.dataSource.carTrip.map(item=>({longitude:item.longitude+0.00603,latitude:item.latitude+0.001275})):this.props.dataSource.carTrip } style={{lineJoin:"round",strokeColor:"#21CA25",strokeWeight:8,isOutline:true,outlineColor:"#137F16"}}/>}
    </Map>
    <div className={style.mapmenu2}>
      <div className={style.menu2}>
        <span><img src={Big} onClick={()=>this.resetBigZoom()}/></span>
        <span><img src={Small} onClick={()=>this.resetSmallZoom()}/></span>
        {/*<span><img src={FullScreen} onClick={()=>this.resetBigZoom()}/></span>*/}
      </div>
    </div>
  </div>
)
  }
}

export default connect(({amap})=>({amap}))(Amap);

BMap（百度地图）

忘了写了

声明

以上内容均来源于实用中的网络和官方查找，若有批漏或侵权请告知。

生命的成长，需要吃饭，还需要吃苦，吃亏。