百度地图.png
如图：项目中百度地图的应用添加起始点、终点并绘制路线
在展示代码的时候首先展示一下后台返回给我的接口
{
"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.有什么问题可以私信或者评论，我只要是看到，定会回复
