react baidu map

添加地图标记

Install

npm install react-map-bdmap --save

API

属性| 描述 | 类型 | 默认值 ---|--- | --- | --- AK |秘钥 |string | 无 coords | 坐标| array | [] showMarker | 展示提示信息 |boolean | false showInfoWindow | 信息窗口 | func | 返回html字符串，请用es6模板字符串 onDrag | 拖动回调 监听dragend事件| func | 无 setPlace | 手动设置位置后获取新位置的坐标，返回promise ,需要设置ref属性后调用| func | 无 getPlace | 手动设置位置后获取新位置| func | 无 callback | 地图加载后的回调函数| func | 无 id | 地图实例id 默认"allmap" | string

usage

 import  BDMap from "react-map-bdmap";
 const mapAK = "xxxx";//秘钥

  class MyPage extends PureComponent{
    constructor(props){
        super(props);
    }
    
    componentDidMount(){
        console.log(this.map)
    }
    onPressEnter = (e)=>{
        this.map.setPlace(e.target.value)
        .then((point)=>{
            console.log(point);
            
        })
        
    }
    showInfoWindow = (point)=>{
        return `<div>
                <span>看到积分了</span>
            </div>
        `
    }
    onDrag = (e)=>{
        console.log(e.point);
    }
    render(){
        return(

        <div style={{height:4000}}>
            
            <Input onPressEnter={this.onPressEnter}>
            </Input>
            <Map
                AK={mapAK}
                id="shuaige"
                coords={[{
                    lat: "39.94746",
                    lng: "116.359764",}]}
                style={{ height: 400 }}
                showMarker
                showInfoWindow={this.showInfoWindow}
                ref={(ref)=>this.map=ref}
            >
                
            </Map>
            <div style={{margin:"40px"}}>
                <Map
                    AK={mapAK}
                    id="jinxin"
                    coords={[{
                        lat: "40.94746",
                        lng: "116.359764",
                    }]}
                    showMarker
                    style={{ height: 400 }}
                >
                    
                </Map>
                </div>
            
        </div>



    )
    }
}

export default MyPage;