百度地图开发平台 http://lbsyun.baidu.com/
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。免费对广大用户开放。
1、创建应用生成ak
2、在index.html中引用
<!-- 引入百度地图api -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
3、在组件中使用
地图显示区
<div id="orderDetailMap" className="order-map"></div>
绘制地图
//绘制地图
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 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 });
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 = [];
positionList.map((point)=>{
trackPoint.push(new window.BMap.Point(point.lon, point.lat));
})
// 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 = [];
positionList.map((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);
}