React共享单车后台管理系统开发（记录笔记11）——11.1 车辆地图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/87182806

参考博客: https://www.cnblogs.com/ljq66/p/10229469.html

百度地图是网页中使用地图的常用第三方工具，这里结合React项目中学到的应用场景总结一些使用要点。

---

百度地图开放平台

Github地址

创建一个网站：登录百度地图开发者平台，为网站申请一个地图的AccesKey（全球唯一网站密钥）

在自己的网页中嵌入百度地图提供的API，嵌入百度地图

1. 引入一个特殊的script，关键放置密钥的地方：

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

2. 核心代码

   var map = new BMap.Map("container");  //创建地图实例
   var point = new BMap.Point(116.300829, 39.915836); //创建点坐标（天安门坐标为例）
   map.centerAndZoom(point, 17); //以指定点为中心并缩放 （17表示层级）
   

3. 常用控件：可能会变，不用记，查文档(http://lbsyun.baidu.com/index.php?title=jspopular/guide/widget)即可

   启用滚轮缩放方法：map.enableScrollWheelZoom(true);
   
   添加导航控件：map.addControl(new BMap.NacigationControl());
   
   添加缩放控件：map.addControl(new BMap.ScalControl());
   
   添加概览图控件：map.addControl(new BMap.OverviewMapControl());　
   
   添加地图类型控件：map.addControl(new BMap.MapTypeControl());　
   

4. 常用覆盖物：小标记/小说明/小页签

   var mk = new BMap.Marker(point);
   map.addOverlay(mk);
   marker.setAnimation(BMap)ANIMATION_BOUNCE); //弹跳动画
   

0. 创建地图容器

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

定义id : 用来放置地图

定义height: 设置地图的高度

return (
      <div>
        <Card>
         ...
        </Card>
        <Card>
          <div>共100辆车</div>
          <div id="container" style={{height:500}}></div>
        </Card>
      </div>
    );

1. map/bike_list 数据接口

设置车辆-地图分布的mock接口:

map/bike_list 地图-车辆地图分布

• 单词补充
  • latitude and longitude 纬度和经度
  • stroke n. 行程
  • Opacity n. 不透明度

{
  "code": 0,
  "result": {
    "total_count": 100,
    "bike_list": ['116.356619,40.017782', '116.437107,39.975331', '116.34972,40.070808', '116.323849,39.964714', '116.404912,40.015129', '116.365243,39.958078'],
    "route_list": ['116.353101,40.067835', '116.357701,40.053699', '116.374086,40.027626', '116.397801,40.01641'],
    "service_list": [{
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
      {
        "lon": "116.316562",
        "lat": "40.144943",
        "ts": null
      },
      {
        "lon": "116.351631",
        "lat": "40.129498",
        "ts": null
      },
      {
        "lon": "116.390582",
        "lat": "40.082481",
        "ts": null
      },
      {
        "lon": "116.38742",
        "lat": "40.01065",
        "ts": null
      },
      {
        "lon": "116.414297",
        "lat": "40.01181",
        "ts": null
      },
      {
        "lon": "116.696242",
        "lat": "39.964035",
        "ts": null
      },
      {
        "lon": "116.494498",
        "lat": "39.851306",
        "ts": null
      },
      {
        "lon": "116.238086",
        "lat": "39.848647",
        "ts": null
      },
      {
        "lon": "116.189454",
        "lat": "39.999418",
        "ts": null
      },
      {
        "lon": "116.244646",
        "lat": "39.990574",
        "ts": null
      },
      {
        "lon": "116.281441",
        "lat": "40.008703",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      }
    ]
  }
}

 renderMap = (res) => {
    
    this.map = new window.BMap.Map('container');         //================1(初始化地图)
  ...
    let startPoint = new window.BMap.Point(gps1[0], gps1[1]);// 起始坐标(0:经度,1:纬度)
 ...    
 }

注意：单页面应用必须调用window.BMap全局变量才能识别BMap，否则会报错no defined；多页面应用中直接使用new BMap.Map(‘id’)即可

2. 实例代码

// src/pages/map/bikeMap.js
import React from 'react';
import {Card, Form} from 'antd';
import BaseForm from './../../components/BaseForm';
import axios from './../../axios';

export default class BikeMap extends React.Component {

  state = {};

  map = '';

  formList = [
    {
      type: '城市'
    }, {
      type: '时间查询'
    }, {
      type: 'SELECT',
      label: '订单状态',
      field: 'order_status',
      placeholder: '全部',
      initialValue: '0',
      list: [{id: '0', name: '全部'}, {id: '1', name: '进行中'}, {id: '2', name: '行程结束'}],
      width: 100
    }
  ];


  componentWillMount() {
    this.requestList();
  }

  // 查询列表数据
  requestList = () => {
    axios.ajax({
      url: '/map/bike_list',
      data: {
        params: this.params
      }
    }).then((res) => {
      if (res.code == 0) {
        this.setState({
          total_count: res.result.total_count,
        });
        this.renderMap(res);
      }
    });
  };

  // 查询表单
  handleFilter = (filterParams) => {
    this.params = filterParams;
    // 点击查询,调用查询数据接口
    this.requestList();
  };

  // 渲染地图数据
  renderMap = (res) => {
    let list = res.result.route_list;// 拿到route_list数据
    this.map = new window.BMap.Map('container');         //================1(初始化地图)
    let gps1 = list[0].split(',');
    let startPoint = new window.BMap.Point(gps1[0], gps1[1]);// 起始坐标(0:经度,1:纬度)
    let gps2 = list[list.length - 1].split(',');
    let endPoint = new window.BMap.Point(gps2[0], gps2[1]);// 终点坐标
    this.map.centerAndZoom(endPoint, 11); // 保证地图居中           // ==============2


    //起点 -- 图标Icon/覆盖物Marker/添加addOverlay
    let startPointIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), { // 设置图片样式
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42) // 偏移
    });

    let bikeMarkerStart = new window.BMap.Marker(startPoint, {icon: startPointIcon});
    this.map.addOverlay(bikeMarkerStart);


    // 终点
    let endPointIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42)
    });
    let bikeMarkerEnd = new window.BMap.Marker(endPoint, {icon: endPointIcon});
    this.map.addOverlay(bikeMarkerEnd);


    bikeMarkerEnd.addEventListener("click", function (e) {
      alert("当前位置：" + e.point.lng + ", " + e.point.lat);
    });


    // 绘制车辆行驶路线
    let routeList = [];
    /*    for(let i = 0 ; i < list.length - 1; i++){
            let item = list[i]; // 拿到每一个坐标点
            let p= item.split(',')
            // 转换为 地图api 需要的坐标点, 存入 trackPoint 数组
            routeList.push(new window.BMap.Point(p[0],p[1]))
        }
     */

    list.forEach((item) => {
      let p = item.split(','); // 拿到每一个坐标点
      routeList.push(new window.BMap.Point(p[0], p[1]));
    });
    // 画折线
    let polyLine = new window.BMap.Polyline(routeList, {
      strokeColor: '#ef4136',
      strokeWeight: 2,
      strokeOpacity: 1
    });

    this.map.addOverlay(polyLine);


    // 绘制服务区
    let servicePointList = [];
    let serviceList = res.result.service_list;
    serviceList.forEach((item) => {
      servicePointList.push(new window.BMap.Point(item.lon, item.lat));
    });
    // 画折线
    let polyServiceLine = new window.BMap.Polyline(servicePointList, {
      strokeColor: '#ef4136',
      strokeWeight: 3,
      strokeOpacity: 1
    });

    this.map.addOverlay(polyServiceLine);

    // 添加地图中的自行车图标
    let bikeList = res.result.bike_list;
    let bikeIcon = new window.BMap.Icon('/assets/bike.jpg', new window.BMap.Size(36, 42), {
      imageSize: new window.BMap.Size(36, 42),
      anchor: new window.BMap.Size(18, 42)
    });
    bikeList.forEach((item) => {
      let p = item.split(',');
      let point = new window.BMap.Point(p[0], p[1]);
      let bikeMarker = new window.BMap.Marker(point, {icon: bikeIcon});
      this.map.addOverlay(bikeMarker);
    });

    // 添加地图控件(设置控件位置)
    this.map.addControl(new window.BMap.ScaleControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
    this.map.addControl(new window.BMap.NavigationControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
  };

  render() {
    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
        </Card>
        <Card style={{marginTop: 10}}>
          <div>共{this.state.total_count}辆车</div>
          <div id="container" style={{height: 500}}></div>
        </Card>
      </div>
    );
  }
}