react-百度地图

---

引入

1. 在public的index.html中引入

  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的Ak"></script>

npm install react-bmapgl --save

import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';

 render() {
        const details=this.state.details;
        return (<div>
            <h1>订单详情</h1>
            {details.order_sn?
                <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11">
                    <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
                    <NavigationControl />
                    <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="内容" title="标题" />
                </Map>:'数据加载中'
            }
        </div>);
    }

Map

引用获取
ref={ref => { this.map = ref.map }}
地图中心
center={{ lng: center.lon, lat: center.lat }}
缩放层级
zoom=“11”
鼠标滚动缩放
enableScrollWheelZoom={true}
样式
style={{ height: 500 }}>

Maker

position={{ lng: position_list[0].lon, lat: position_list[0].lat }}
icon=“start”
icon=“end”
onClick={this.showInfo}

Polyline绘线

	<Polyline
    path={
        position_list.map(item => new window.BMapGL.Point(item.lon, item.lat))
    }
    strokeColor="#f00"
    strokeWeight={6}
/>

Polygon区域

	<Polygon
    path={
        details.area.map(item => new window.BMapGL.Point(item.lon, item.lat))
    }
    strokeColor="#f00"
    strokeWeight={1}
    fillColor="#ff0"
    fillOpacity={0.1}
    // onMouseover={e => { console.log(e) }}
/>

缩放组件ZoomControl

导航组件 <NavigationControl />

信息窗口<InfoWindow></InfoWindow>

ref={ref => { this.infoWindow = ref.infoWindow }}
	位置
position={new window.BMapGL.Point(116.40, 39.91)}
	标题
title="订单信息"
	内容
text={text}
	onClickclose={e => { console.log(e) }}
	打开信息窗口 
this.map.openInfoWindow(this.infoWindow, this.map.getCenter());