百度地图
Posted mosquito18
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图相关的知识，希望对你有一定的参考价值。
1.创建ak，加载百度地图SDK
https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api/order/detail?orderId=1在public文件夹的index.html里添加
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Z6VLb33wYXOcBcWtpVMjPvbU0DpUdQup"></script>
html
<div id="orderDetailMap" className="order-map"></div>
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<positionList.length;i++){ let point = positionList[i]; trackPoint.push(new window.BMap.Point(point.lon, point.lat)); } let polyline = new window.BMap.Polyline(trackPoint,{ strokeColor:‘#1869AD‘, strokeWeight:3, strokeOpacity:1 }) this.map.addOverlay(polyline); this.map.centerAndZoom(endPoint, 11); } } // 绘制服务区 drwaServiceArea = (positionList)=>{ // 连接路线图 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 OK Connection: keep-alive Content-Length: 2185 Content-Type: application/json; charset=utf-8 Date: Sat, 13 Oct 2018 04:13:54 GMT Rate-Limit-Remaining: 0 Rate-Limit-Reset: 1539404035 Rate-Limit-Total: 2 Server: Tengine Vary: Accept, Origin X-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 } ] } }
以上是关于百度地图的主要内容，如果未能解决你的问题，请参考以下文章