在react中使用百度地图

开始使用

引入脚本

需要在你的public/index.html模板页面头部加载百度地图JavaScript API代码,密钥可去百度地图开放平台官网申请

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

使用npm方式安装react组件库

npm install react-bmapgl --save

使用

import React from 'react';
import ReactDOM from 'react-dom';
//导入百度地图相关内容
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';

class App extends React.Component {
    render() {
    {/*`enableDoubleClickZoom`  是否开启双击鼠标缩放 
       zoom 缩放级别
    */}
        return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11"
        enableScrollWheelZoom={true}>
            <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'));

添加控件

缩放控件 <ZoomControl />
比例尺控件 <ScaleControl />

覆盖物

文本标注  <Label
          position={new BMapGL.Point(116.40, 39.91)}
          text="欢迎使用百度地图GL版"
        />
点标注   <Marker
          position={new BMapGL.Point(116.404449, 39.914889)}
          enableDragging
        />
信息窗口  <InfoWindow
          position={new BMapGL.Point(116.40, 39.91)}
          title="标题"
          text="快速文本信息窗口"
          onClickclose={e => {console.log(e)}}
        />
多边形   <Polygon
          path={[
            new BMapGL.Point(116.35, 39.88),
            new BMapGL.Point(116.40, 39.92),
            new BMapGL.Point(116.33, 40.01),
          ]}
          strokeColor="#f00"
          strokeWeight={2}
          fillColor="#ff0"
          fillOpacity={0.3}
          onMouseover={e => {console.log(e)}}
        />
折线    <Polyline
          path={[
            new BMapGL.Point(116.35, 39.88),
            new BMapGL.Point(116.40, 39.92),
            new BMapGL.Point(116.33, 40.01),
          ]}
          strokeColor="#f00"
          strokeWeight={10}
        />

地图图层

交通路况图层   <TrafficLayer />
全景图层       <PanoramaLayer />