【重点突破】—— 百度地图在React单页面应用中的使用

【重点突破】—— 百度地图在React单页面应用中的使用

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

---

一、在网页中嵌入百度地图

• 搜百度地图开放平台，注册百度开发者账号

1. 控制台：查看应用、创建应用（获得百度地图密钥）
2. 开发文档：选择JavaScriptAPI

   

   Referer白名单：*   （例如*.tedu.cn  域名只能有这个字段，才能使用这个密钥，避免因盗用密钥使用自己网站的服务）

• 创建一个网站：登录百度地图开发者平台，为网站申请一个地图的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表示层级）
   

• 常用控件：可能会变，不用记，查文档即可

1. 启用滚轮缩放方法：map.enableScrollWheelZoom(true);

2. 添加导航控件：map.addControl(new BMap.NacigationControl());

3. 添加缩放控件：map.addControl(new BMap.ScalControl());

4. 添加概览图控件：map.addControl(new BMap.OverviewMapControl());　

5. 添加地图类型控件：map.addControl(new BMap.MapTypeControl());　

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

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

  　　

二、绘制订单地图

• 
• Easy Mock订单详情数据接口：/order/detail

  {
    "code": 0,
    "msg": "",
    "list": {
      "status": 2,
      "order_sn": "T1803244422704080JGJI",
      "bike_sn": '802410001',
      "mode|1-2": 1,
      "start_location": "北京市昌平区回龙观东大街",
      "end_location": "北京市海淀区奥林匹克公园",
      "city_id": 1,
      "mobile": "13597482075",
      "user_name": "@cname",
      "distance": 10000,
      "bike_gps": "116.398806,40.008637",
      "start_time": 1546580667000,
      "end_time": 1546608995000,
      "total_time": 224,
      "position_list": [{
          "lon": 116.361221,
          "lat": 40.043776
        },
        {
          "lon": 116.363736,
          "lat": 40.038086
        },
        {
          "lon": 116.364599,
          "lat": 40.036484
        },
        {
          "lon": 116.373438,
          "lat": 40.03538
        },
        {
          "lon": 116.377966,
          "lat": 40.036263
        },
        {
          "lon": 116.379762,
          "lat": 40.03654
        },
        {
          "lon": 116.38084,