React17 + 百度地图API 渲染地图组件

心已赠人 2022-10-28 14:25 252阅读 0赞

注册百度地图开发者账号，获取 AK

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]

选择 javascript api  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
开发者文档地址 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld][http_lbsyun.baidu.com_index.php_title_jspopular_guide_helloworld]

（项目演示 v2.0 版本）

React 目录中 public 文件夹下的 index.html 文件

<!DOCTYPE html>
    <html lang="en">
      <head>
        // ...
        <title>React App</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写自己的AK"></script>
      </head>
      <body>
        // ...
      </body>
    </html>

新建一个 map.js（根据自己的需求决定）

思路：通过接口获取后端的数据，将数据渲染到 BMap 中

import React from 'react'
    import {  Card } from 'antd'
    import axios from '../../axios/index'
    
    export default class BikeMap extends React.Component { 
    
      state = { 
        bickeInfo: { }
      }
    
      map = { }
    
      requestList = () => { 
        axios.ajax({ 
          url: '/map/bike_list',
          data: { 
            params: this.params
          }
        }).then((res) => { 
          if (res) { 
            this.setState({ 
              total_count: res.result.total_count
            })
            this.renderMap(res.result);
          }
        })
      }
    
      componentDidMount() { 
        this.requestList()
      }
    
      // 渲染地图
      renderMap = (res) => { 
        let list = res.route_list;
        this.map = new window.BMap.Map("container", {  enableMapClick: false });
        // 起点
        let gps1 = list[0].split(',');
        let startPoint = new window.BMap.Point(gps1[0], gps1[1]);
        // 终点
        let gps2 = list[list.length - 1].split(',');
        let endPoint = new window.BMap.Point(gps2[0], gps2[1]);
    
        // 确定中心点，缩放比例
        this.map.centerAndZoom(endPoint, 11);
        
    
        //添加起始图标
        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)
        });
    
        var 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)
        });
        var bikeMarkerEnd = new window.BMap.Marker(endPoint, {  icon: endPointIcon });
        this.map.addOverlay(bikeMarkerEnd);
    
        let routeList = [];
        list.forEach((item) => { 
          let p = item.split(",");
          let point = new window.BMap.Point(p[0], p[1]);
          routeList.push(point);
        })
        // 行驶路线
        var polyLine = new window.BMap.Polyline(routeList, { 
          strokeColor: "#ef4136",
          strokeWeight: 3,
          strokeOpacity: 1
        });
        this.map.addOverlay(polyLine);
    
        // 服务区路线
        let serviceList = res.service_list;
        let servicePointist = [];
        serviceList.forEach((item) => { 
          let point = new window.BMap.Point(item.lon, item.lat);
          servicePointist.push(point);
        })
        // 画线
        var polyServiceLine = new window.BMap.Polyline(servicePointist, { 
          strokeColor: "#ef4136",
          strokeWeight: 3,
          strokeOpacity: 1
        });
        this.map.addOverlay(polyServiceLine);
    
        // 添加地图中的自行车
        let bikeList = res.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(",");
          // p[0], p[1] 经纬度
          let point = new window.BMap.Point(p[0], p[1]);
          var bikeMarker = new window.BMap.Marker(point, {  icon: bikeIcon });
          this.map.addOverlay(bikeMarker);
        })
    
        // 添加地图控件
        this.addMapControl();
      };
    
      // 添加地图控件
      addMapControl = () => { 
        let map = this.map;
        // 左上角，添加比例尺
        var top_right_control = new window.BMap.ScaleControl({  anchor: window.BMAP_ANCHOR_TOP_RIGHT });
        var top_right_navigation = new window.BMap.NavigationControl({  anchor: window.BMAP_ANCHOR_TOP_RIGHT });
        //添加控件和比例尺
        map.addControl(top_right_control);
        map.addControl(top_right_navigation);
        map.enableScrollWheelZoom(true);
        // legend.addLegend(map);
      };
    
      render() { 
        return (
          <div style={ { width: '100%'}}>
            <Card style={ {  marginTop: 10 }}>
              <div>共{ this.state.total_count}辆车</div>
              <div id="container" style={ {  height: 500 }}></div>
            </Card>
          </div>
        )
      }
    }

返回的数据格式如下：

{ 
      "status": 200,
      "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
          }
        ]
      }
    }

渲染效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]

--------------------

![在这里插入图片描述][20210206201103820.png_pic_center]

关注公众号：大明贵妇，回复 react 获取 react 资料，期待各位客官来临  
![在这里插入图片描述][2021020619544360.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]: /images/20221024/18284803d3d046cd912742eb336e6769.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/28c542954e6c43c093b42c51d26b444b.png
[http_lbsyun.baidu.com_index.php_title_jspopular_guide_helloworld]: http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20221024/e797c65563e74f0fbe4268d87e53b5eb.png
[20210206201103820.png_pic_center]: /images/20221024/4bb717d30eb54c789d00bf4402adca3d.png
[2021020619544360.jpg_pic_center]: /images/20221024/780e7f1e260c49cbb268cc7dc3fb641f.png