需求背景:
想在地图展示页面给开车用户实现自己的路基规划，在此路径上面把 车主所需要的东西展示出来
开始实施:
1: 首先你得申请一个高德地图使用api得账号 这里直接百度 就可以 很详细 然后申请成功后大概是
“https://webapi.amap.com/maps?v=1.4.14&key=你所申请得钥匙” 这样得链接放在你所需要用的地方
2: 因为你在该地图需要用到路径规划 所以 对应得高德提供得 AMap.Driving 需要在地图上面打图钉就需要对应AMap.MarkerClusterer 然后“https://webapi.amap.com/maps?v=1.4.14&key=你所申请得钥匙plugin=AMap.MarkerClusterer,AMap.Driving” 这样声明一下就行了
3:准备工作完了 就是写代码时候
首先在地图页面需要初始化地图 在html结构里面先声明一个<div id="container"></div> 这个id就是应下面地图得实例
// 首先去初始化地图展示
const map = new AMap.Map("container", {
resizeEnable: true, // 监听地图尺寸变化
zoom: 11, // 地图层级
center: [121.53872956249998, 31.0863954773267], //地图中心点
});
// https://lbs.amap.com/api/javascript-api/reference/map/#MapOption 具体对象里面得值和含义见官网
初始化结束后 就要去画路线 我们声明得插件AMap.Driving就起作用了
//驾车路线规划
let driving = new this.AMap.Driving({
// 这边路径规划的方式 LEAST_TIME:最快捷模式, LEAST_FEE: 最经济模式, LEAST_DISTANCE: 最短距离模式 REAL_TRAFFIC: 考虑实时路况
policy: this.AMap.DrivingPolicy.LEAST_TIME, //一般我们都是选择最快捷模式
panel: "panel", // 这个是高德提供的路线图和UI图片 如果用panel 就需要在html 上面定一个 <div id="panel"></div>
map: map // 对应上面声明的地图
});
// 具体更多的api 见 https://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving
然后我们就要把经纬度什么的放进去
let startLngLat = [] // 起始的经纬度
let startLngLat = [] // 终点的经纬度
let wayPoints = [] // 沿途点的经纬度
driving.search(
startLngLat,
endLngLat,
{
waypoints: wayPoints
},
(status, result) => {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制驾车路线完成"); // 成功之后可以去调用接口把需要的沿途数据展示出来
} else {
console.log("获取驾车数据失败：" + result);
}
}
);
这样 地图规划 差不多都完成了 下面属于如何定制化自己的UI 和路线的颜色
// 这时候这边下面参数也不要了 就要一个路径规划方式
let driving = new this.AMap.Driving({
policy: this.AMap.DrivingPolicy.LEAST_TIME,
});
// 然后再上一块代码里面加个方法
if (status === "complete") {
this.drawRoute(result.routes[0]);
console.log("绘制驾车路线完成");
} else {
console.log("获取驾车数据失败：" + result);
}
drawRoute(route) {
let path = this.parseRouteToPath(route);
// 起始点的样式
let startMarker = new this.AMap.Marker({
position: path[0],
icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
map: map
});
// 途径点的样式
let waypoint = new this.AMap.Marker({
position: { Q: 31.19281, R: 121.48872956249998, lat: 31.19281, lng: 121.48872956249998 },
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mid.png",
map: map
});
// 终点的样式
let endMarker = new this.AMap.Marker({
position: path[path.length - 1],
icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
map: map
});
// 路线的样式
// 具体api见https://lbs.amap.com/api/jsapi-v2/documentation#driving 的 AMap.Polyline
let routeLine = new this.AMap.Polyline({
path: path,
isOutline: true,
outlineColor: "#ffeeee",
borderWeight: 2,
strokeWeight: 5,
strokeColor: "#0091ff",
lineJoin: "round"
});
routeLine.setMap(map); // 放在当前地图里面
map.setFitView([startMarker, endMarker, routeLine]); // 自适应地图视野 这样地图展示会把画的路线完美展示到页面
}
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
// 这个地方是把路线上的经纬度全部循环出来 这边拿到这些数据可以根据具体的业务去操作相当于的东西
parseRouteToPath(route) {
let path = [];
for (let i = 0, l = route.steps.length; i < l; i++) {
let step = route.steps[i];
for (let j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j]);
}
}
return path;
}
到这里自定义地图的绘制也完成了啦, 感谢高德强大的支持度
