百度地图绘制途径点
百度地图Api地址: https://lbsyun.baidu.com/
公司项目中要求绘制物流信息,需体现途径点 但是我在其中没有找到有关绘制路线,设定途径点的相关说明
有一个非官方方法:给 search方法的第三个参数传一个waypoints对象, 其中middlePoints为标点的数组:(途径点貌似并不生效)
//途经点方式化路线:
driving.search(startPoint, endPoint, {
waypoints: middlePoints })
但是这个方法并不精准,由于没找到相关官方说明,也没深入考究,效果如下: 计算路线并未完全经过途径点
于是我们换一种思路
分段绘制路线
多次执行 driving.search(startPoint, endPoint)
for (let i = 0; i < middlePoints.length; i++) {
if (i === 0) {
driving.search(startPoint, middlePoints[i])
} else {
driving.search(middlePoints[i - 1], middlePoints[i])
}
}
driving.search(middlePoints[middlePoints.length - 1], endPoint)
但是这时就需要运用到更底层一点的函数 链接: 百度地图jsapi 类参考
在路线的构造函数里面,绘制途径点的每一段路线,并修改样式等等
最终详细代码如下:
//点的坐标值
var gps = [
{
lng: 125.532203,lat: 43.715047},
{
lng: 123.545295,lat: 42.009887}