React-百度地图的使用

React-bmap

1.安装

npm i react-bmapgl -s

2.引入

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=kmFLZ2pDs8Fkk90rHUksNrdtlnM3X8yT"></script>

3.引入组件

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

4.Map

1. 引用获取

ref={ref => { this.map = ref.map }}

2. 地图中心

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

3. 鼠标滚动缩放

enableScrollWheelZoom={true}

4. 样式

style={{ height: 600 }}>

5. 缩放层级

zoom="13"

5. Marker

  {/* 起点 */}
                <Marker position={{ lng: position_list[0].lon, lat: position_list[0].lat }}
                    icon="start"
                    onClick={this.showInfo}
                />
                {/*终点  */}
                <Marker icon="end"
                    position={{ lng: position_list[position_list.length - 1].lon, lat: position_list[position_list.length - 1].lat }}
                    onClick={this.showInfo}
                />

6.绘线 Polyline

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

7. 绘制多边形Polygon

<Polygon
                    path={details.area.map(item => new window.BMapGL.Point(item.lon, item.lat))}      //路径               
                    strokeColor="#f00" //颜色
                    strokeWeight={1} //粗细
                    fillColor="#ff0" //填充颜色
                    fillOpacity={0.1} //填充透明度
                      />

8.组件

ZoomConyrol 缩放组件

NavigationControl 导航组件

infoWindow 信息窗口
1. ref={ref => { this.infoWindow = ref.infoWindow }}
2. position 位置
3. title 标题
4. text 文本内容
5. 打开信息窗口
map.openInfoWindow(infoWindow, map.getCenter());