react 中使用百度地图

安装

1. 安装
   在项目文件中打开cmd窗口，然后，使用npm方式安装react组件库。

npm install react-bmapgl --save

2. 在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请。
3. 引入组件

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

完整代码如下

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

class App extends React.Component {
    render() {
        return <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>
    }
}
ReactDOM.render(<App />, document.getElementById('container'));

获取map实例

如果你在业务中需要操作map对象，需要BMapGL.Map实例的话，可以通过

<Map ref={ref => {this.map = ref.map}} />

map常用组件

1. 地图中心

center={{lng:center.lon,lat:center.lat}}

2. 鼠标滚动缩放

enableScrollWheelZoom={true}