import  React,{Component} from 'react';
import styled from "styled-components"
import BMap  from 'BMap';
import {Notification,Button,Icon} from 'bee-mobile';const NewaddressButton = styled(Button)`width:${props=>props.width||"100%"};height:${props=>props.height||"200px"};background-color:${props=>props.sideBgColor||"white"};overflow:hidden;
`const Address = styled.div`width:100%;height:${props=>props.height||"200px" } !important;.BMap_stdMpCtrl{position:fixed !important;right:0;top:.5rem;}
`const Pudian = styled.div`width:100%;height:50px;
`
const Addresstop = styled.div`position:fixed;z-index:999;height:.5rem;width:100%;background-color:rgb(53, 218, 132);padding-top:.05rem;padding-left:.05rem;display:flex;color:white;line-height:.4rem;.address_goback{button{background-color:rgb(43, 208, 130)}}.addressInfo{padding-left:.1rem;flex:1;button{width:95%;background-color:rgb(43, 208, 130)}}
`class AddressComponent extends Component{ render() {return(<div><Addresstop><div className="address_goback"><Button theme="success" shape="circle" onClick={this.props.topButtonEvent.bind(this)}><Icon icon="keyboard_backspace"/></Button></div><div className="addressInfo"><Button theme="success"><span>当前地址:</span><span>{this.props.topAddress}</span></Button></div></Addresstop><Pudian></Pudian><NewaddressButton {...this.props}><Address className="address" id="address" {...this.props}></Address></NewaddressButton></div>)}componentDidMount(){var map = new BMap.Map("address"); // 创建Map实例//城市优先if(this.props.MapCity){map.centerAndZoom(this.props.MapCity||"北京",this.props.level||11);}else{map.centerAndZoom(new BMap.Point(this.props.longitude||116.404,this.props.latitude||39.915), this.props.level||11); // 初始化地图,设置中心点坐标和地图级别}this.props.MapTypeControl&&map.addControl(new BMap.MapTypeControl()); //添加地图类型控件this.props.enableScrollWheelZoom&&map.enableScrollWheelZoom();if(this.props.zoomControl){var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件//添加控件和比例尺map.addControl(top_left_navigation);}var _this = thisvar geoc = new BMap.Geocoder(); //获取到点击的APImap.addEventListener("click",function(e){var pt = e.point;geoc.getLocation(pt, function(rs){var addComp = rs.addressComponents;console.log(pt)_this.props.getAddress(addComp,pt)//添加提示信息//在当前地图上设置标注//创建小狐狸map.clearOverlays();var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(170,157));var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注map.addOverlay(marker2);              // 将标注添加到地图中Notification.info({title: '',message: `已选择:${addComp.province&&addComp.province}${addComp.city&&"/" addComp.city}${addComp.district&&"/" addComp.district}${addComp.street&&"/" addComp.street}`,},)});})}}
export default AddressComponent

<AddressComponent  //顶部城市
　　　　　　　　　topAddress = {this.props.address}//顶部返回按钮的事件
　　　　　　　　　topButtonEvent = {this.topButtonEvent.bind(this)}  //组件的高度            height="500px" //侧边的背景颜色
　　　　　　　　　sideBgColor="lightBlue"//显示地图的级别
               level="11"//设置中心城市，城市优先于经纬度
              MapCity="上海"longitude ="116.404"latitude="39.915" // 地图类型控件
              MapTypeControl={true}//是否可以鼠标滚轮滑动
              enableScrollWheelZoom={true}//缩放控件
              zoomControl={true}getAddress = {(address,LongitudeAndLatitude)=>{//在此可以获取到地址
               　 //   alert(address.province   ", "   address.city   ", "   address.district   ", "   address.street   ", "   address.streetNumber);
                　// 可以在此处获取地址进行操作
　　　　　　　　　　 //LongitudeAndLatitude为经纬度
console.log(LongitudeAndLatitude)}}></AddressComponent>