如圖：項目中百度地圖的應用添加起始點、終點並繪製路線
在展示代碼的時候首先展示一下後臺返回給我的接口
{
"code": '0',
"msg": '',
"result": {
"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": 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
}]
}
}
其中position_list參數代表的是用戶的行駛點 area參數代表的是服務區的座標點
下面開始展示代碼了
index.html引入百度地圖
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
//Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc
</script>
demo.js
componentDidMount(){
this.getDetailInfo()
}
//獲取接口數據
getDetailInfo = (orderId)=>{
axios({
url:"/order/detail",
data:{
params:{
orderId:orderId
}
}
}).then((res)=>{
if(res.code ==='0' ){
this.setState({
orderInfo:res.result
})
this.renderMap(res.result) //傳入數據
}
})
}
//加載地圖
renderMap = (result)=>{
this.map=new window.BMap.Map("orderDetailMap"); //初始化地圖，裏面需要有一個id
//加載控件
this.addMapControl();
//加載完地圖之後加載路線
this.drawBikeRoute(result.position_list)
//繪製服務區路線
this.drawServiceArea(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 end=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(36,42),
})
let startMarker = new window.BMap.Marker(startPoint,{icon:startIcon})
this.map.addOverlay(startMarker) //添加覆蓋物初始點圖標
//終點
endPoint = new window.BMap.Point(end.lon,end.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(36,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);
}
//繪製服務區路線
drawServiceArea = (position_List) =>{
let trackPoint = [];
for(let i=0;i<position_List.length;i++){
let point = position_List[i]; //point是後臺返回的所有點的集合
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);
}
render(){
const info = this.state.orderInfo
return(
<div>
<Card>
<div id="orderDetailMap" className="order-map"></div>
</Card>
</div>
)
}
}
關於整個項目的幾點需要注意
1.我的上一篇文章是關於如何在react項目中使用百度地圖的，是初級版本，可以先看那篇文章後在看這篇
2.如果裏面涉及到的圖片感興趣的可以私信找我要，我發給你
3.圖片中的起始點和終點之間是有一條路線的，放大後應該能看清
4.有什麼問題可以私信或者評論，我只要是看到，定會回覆