百度地图 react-百度地图 （笔记）

初步了解应用

地图实例

• html引用src添加ak

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

• 添加div存放地图（注意设置宽高)

<div id="container"></div>

• 实例化地图

// 创建换一个地图实例
        var map = new BMapGL.Map("container");
        // 创建一个点
        var point = new BMapGL.Point(113.6648, 34.7835); 

        // 设置缩放与中心点
        map.centerAndZoom(point,17);

控件

// 地图控件
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // map.setMapType(BMAP_EARTH_MAP);      //开启地球模式 

地图绘制样式

• 点标记

	        // 绘制点
        var marker = new BMapGL.Marker(point);
        // 视图中添加点
        map.addOverlay(marker); 

• 多边线

var polygon = new BMapGL.Polygon(tempList, 
 {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); 

- 多边形

 	var polygon = new BMapGL.Polygon(tempList, 
 {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"#f00"});

• 圆形

var circle = new BMapGL.Circle(point,1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
        map.addOverlay(circle);

• 文本标记

	//内容   支持内部写html标签
var content = '气哭';
	//设置
var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,
            offset: new BMapGL.Size(10, 20)
        })
        map.addOverlay(label);
	//样式
label.setStyle({                              // 设置label的样式
            color: '#f70',
            fontSize: '30px',
            border: '2px solid #F30'
        })

• 信息窗口

	//选项
 var opts = {
            width: 250,     // 信息窗口宽度
            height: 100,    // 信息窗口高度
            title: "cyl",  // 信息窗口标题
            message: "学习"
        }
	//信息窗口
 var infoWindow = new BMapGL.InfoWindow("学习", opts);  // 创建信息窗口对象
	//事件切换
 marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point);        // 打开信息窗口
        })

• 事件
  map.addEventLister("click"")dblclick 双击

react-bmap

安装与应用

• 安装

 npm i react-bmapgl -S

• 引用

<script type="text/javascript" src="//api.map.baidu.com/apitype=webgl&v=1.0&ak=个人密钥">

• 3.引入组件

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

• Map
  引用获取
  ref={ref => {this.map = ref.map}}
  地图中心
  center={{ lng: center.lon, lat: center.lat}}
  鼠标滚动缩放
  enableScrollwheelZoom={true}
  样式
  style={{ height: 600 }}
• Marker
  position={{lng,lat}}
  图标
  icon="start"
onClick={this.showlnfo}
• Polyline绘线

	 path={ new window.BMapGL.Point(lng,lat))}
strokeColor="#f00"
strokeWeight={6}

• Polygo 多边形

	path=
strokeColor="#f00"
strokeWeight={1}
fillColor="#ff0"
fillOpacity={0.1}

路径，线条颜色，线条出现，填充颜色，填充透明度
ZoomControl 缩放组件
<NavigationControl /> 导航组件

• InfoWindow 信息窗口

	ref={res=>this.infoWindow=ref.infoWindow}
	position 位首
	title 标题
	text 文本内容
	打开信息窗口
this.map.openInfoWindow(this.infoWindow,this.map.getCenter());

##代码

import React, { Component } from 'react'
// 导入获取api
import {getOrderDetail} from '../../api/order/index'
// 导入地图组件
import {Map, Marker, NavigationControl, InfoWindow,Polyline,Polygon,ZoomControl } from 'react-bmapgl';
class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = { details:{} }
        // 地图的实例
        this.map = null;
        // 信息窗口的实例
        this.infoWindow = null;
    }
    componentDidMount() {
        //把id传给api方法
        getOrderDetail({order_sn:this.props.match.params.id})
        .then(res=>{
            console.log(res);
            this.setState({details:res.result})
        })
    }
    showInfo=e=>{
        // console.log(this.map,this.map.getCenter());
        // 单击开始和结束图标，显示infoWindow
        // this.map.getCenter() 获取地图的中心点
        // openInfoWindow百度地图api
        this.map.openInfoWindow(this.infoWindow, this.map.getCenter()); 
    }
    render() { 
        const details = this.state.details;
        if(details.position_list){
            // 用户位置列表
            var position_list = details.position_list;
            // 获取中心点
            var center =position_list[Math.floor(position_list.length/2)];
            var text = `里程：${details.distance}米<br/>时长：${Math.round(details.total_time/60)}分
            <br/>用户：${details.user_name}`
        }
        return ( <div>
            <h1>订单详情</h1>
            {details.order_sn?<Map 
            ref={ref => {this.map = ref.map}}
            center={{lng: center.lon, lat: center.lat}} 
            zoom="13"  
            enableScrollWheelZoom={true}
            style={{ height: 600 }}>
                {/* 起点 */}
                    <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}
                    />
                {/* 骑车路径 */}
                    <Polyline
                    path={ position_list.map(item=> new window.BMapGL.Point(item.lon, item.lat))}
                    strokeColor="#f00"
                    strokeWeight={6}/>
                {/* 可以使用区域 */}
                     <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
                     ref={ref => {this.infoWindow= ref.infoWindow}}
                    position={new window.BMapGL.Point(center.lon, center.lat)}
                    title="订单信息"
                    text={text}
                    onClickclose={e => {console.log(e)}}
                    />                
                </Map>:'数据加载中'
                // map.openInfoWindow(infoWindow, map.getCenter()); 
            }
        </div> );
    }
}
 
export default OrderDetail;