1.创建ak，加载百度地图SDK

https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api/order/detail?orderId=1在public文件夹的index.html里添加

 html

css

.order-map{
     height: 450px;  margin: 25px -31px 0;}

js

renderMap = (result)=>{        this.map = new window.BMap.Map('orderDetailMap');        // this.map.centerAndZoom('北京',11);        // 添加地图控件        this.addMapControl();        // 调用路线图绘制方法        this.drawBikeRoute(result.position_list);        // 调用服务区绘制方法        this.drwaServiceArea(result.area);    }    // 添加地图控件    addMapControl = ()=>{        let map = this.map;        map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT}));//缩放控件        map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));//导航控件    }    // 绘制用户的行驶路线    drawBikeRoute = (positionList)=>{        let map = this.map;        let startPoint = '';        let endPoint = '';        if (positionList.length>0){            let first = positionList[0];            let last = positionList[positionList.length-1];            startPoint = new window.BMap.Point(first.lon,first.lat);            let startIcon = 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 startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});//图标不能直接创建到地图上，只能通过marker            this.map.addOverlay(startMarker);            endPoint = new window.BMap.Point(last.lon, last.lat);            let endIcon = 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 endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });            this.map.addOverlay(endMarker);            // 连接路线图            let trackPoint = [];            for(let i=0;i
     
      {        // 连接路线图        let trackPoint = [];        for (let i = 0; i < positionList.length; i++) {            let point = positionList[i];            trackPoint.push(new window.BMap.Point(point.lon, point.lat));        }        // 绘制服务区        let polygon = new window.BMap.Polygon(trackPoint, {            strokeColor: '#CE0000',            strokeWeight: 4,            strokeOpacity: 1,            fillColor: '#ff8605',            fillOpacity:0.4        })        this.map.addOverlay(polygon);    }
     

 

 接口数据

HTTP/1.1 200 OKConnection: keep-aliveContent-Length: 2185Content-Type: application/json; charset=utf-8Date: Sat, 13 Oct 2018 04:13:54 GMTRate-Limit-Remaining: 0Rate-Limit-Reset: 1539404035Rate-Limit-Total: 2Server: TengineVary: Accept, OriginX-Request-Id: 44f7bfa5-d057-4c82-91cb-721944b55de4{  "code": "0",  "msg": "",  "result": {    "status": 2,    "order_sn": "T1803244422704080JGJI",    "bike_sn": "802410001",    "mode": 1,    "start_location": "北京市昌平区回龙观东大街",    "end_location": "北京市海淀区奥林匹克公园",    "city_id": 1,    "mobile": "13597482075",    "user_name": "丁磊",    "distance": 10000,    "bike_gps": "116.398806,40.008637",    "start_time": 1521865027000,    "end_time": 1521865251000,    "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,        "lat": 40.033225      },      {        "lon": 116.38084,        "lat": 40.029413      },      {        "lon": 116.381343,        "lat": 40.021291      },      {        "lon": 116.381846,        "lat": 40.015821      },      {        "lon": 116.382637,        "lat": 40.008084      },      {        "lon": 116.398806,        "lat": 40.008637      }    ],    "area": [      {        "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      }    ],    "area_list": null,    "npl_list": [      {        "id": 8265,        "name": "北辰世纪中心-a座",        "city_id": 1,        "type": 3,        "status": 0,        "map_point": "116.39338796444|40.008120315215;116.39494038009002|40.008177258745;116.39496911688|40.006268094213;116.39512457763|40.004256795877;116.39360214742|40.004222412241;116.39357190147|40.005075745782;116.39351397873|40.005836165232;116.39338796444|40.008120315215",        "map_point_array": [          "116.39338796444|40.008120315215",          "116.396053|40.008273",          "116.396448|40.006338",          "116.396915|40.004266",          "116.39192|40.004072",          "116.391525|40.004984",          "116.391381|40.005924",          "116.391166|40.007913"        ],        "map_status": 1,        "creator_name": "赵程程",        "create_time": 1507863539000      }    ]  }}