高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线

临时接到一个小任务，要封装一个绘制带有方向箭头的折线的功能接口，就下面这种样式：

百度地图给的示例是这样的：

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,//图标缩放大小strokeColor:'#fff',//设置矢量图标的线填充颜色strokeWeight: '2',//设置线宽
});
var icons = new BMap.IconSequence(sy, '10', '30');
// 创建polyline对象
var pois = [new BMap.Point(116.350658,39.938285),new BMap.Point(116.386446,39.939281),new BMap.Point(116.389034,39.913828),new BMap.Point(116.442501,39.914603)
];
var polyline =new BMap.Polyline(pois, {enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为trueicons:[icons],strokeWeight:'8',//折线的宽度，以像素为单位strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1strokeColor:"#18a45b" //折线颜色
});

那个箭头其实就是一连串的icons,不过要加入icons参数前得先创建Symbol,然后再根据BMap.IconSequence()方法创建出icons，同时也可对symbol样式进行设定。

高德地图的示例是这样的：

 var lineArr = [[116.368904, 39.913423],[116.382122, 39.901176],[116.387271, 39.912501],[116.398258, 39.904600]];var polyline = new AMap.Polyline({path: lineArr,          //设置线覆盖物路径strokeColor: "#3366FF", //线颜色strokeOpacity: 1,       //线透明度strokeWeight: 10,        //线宽strokeStyle: "solid",   //线样式showDir:true,strokeDasharray: [10, 5] //补充线样式});polyline.setMap(map);

其实就是加了一个showDir参数，不过这里箭头的样式就是固定的。

现在要解决的是把百度的和高德的接口封装成一个统一的接口，以便根据需求，在不同的地图下调用统一的接口。有两种思路：

1.沿用百度的：

newSymbol(options){return new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,options);
}newIconSequence(symbol){return new BMap.IconSequence(symbol, '10', '30');
}newPolyline(pointArr,polylineOptions,icons){polylineOptions["icons"]=[icons];return new BMap.Polyline(pointArr,polylineOptions);
}

polylineOptions["icons"]=[icons];这里是我刚学到的小方法

polylineOptions={strokeOpacity: 1, strokeWeight: 8}跟json数组很像，原来还可以直接通过上面这行代码插入icons:[icons]

由于高德地图中并没有Symbol，IconSequence这种方法，只是一个"showDir"参数。如果要封装成统一接口的话，就只能写空方法代替：

newSymbol(options){return null;
}newIconSequence(symbol){return null;
}newPolyline(pointArr,polylineOptions,icons){polylineOptions["path"]=pointArr;polylineOptions["showDir"]=true;return new AMap.Polyline(polylineOptions);
}

这样写的话有个问题就是百度地图下调用接口的话，icon样式是可以由用户定义的；但是在高德地图下，虽然是暴露出定义icon样式的方法，但是方法体是空的，因此不起作用，好像有点糊弄人。

2.沿用高德的

直接把icon样式定死

封装后的部分js代码：

百度（BMap）：

newPolyline(pointArr,polylineOptions){let sy= new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,//图标缩放大小strokeColor:'#fff',//设置矢量图标的线填充颜色strokeWeight: '2',//设置线宽});let icons=new BMap.IconSequence(sy, '10', '30');polylineOptions["icons"]=[icons];return new BMap.Polyline(pointArr,polylineOptions);
}

高德（AMap）：

newPolyline(pointArr,polylineOptions){polylineOptions["path"]=pointArr;polylineOptions["showDir"]=true;return new AMap.Polyline(polylineOptions);
}

这样也能做到接口的统一。

高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线相关推荐

高德地图和百度地图接口封装遇到的问题（三）：参数集中插入参数以及引用未定义参数
1.向参数集中插入新参数: 由于要将高德地图和百度地图提供的方法封装成一个统一的方法,而对于某些功能来说可能传进来的参数个数不一样,比如下面的绘制折线功能: //高德地图// 折线的节点坐标数组,每个 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
uniapp 打开高德地图或者百度地图进行导航
//打开第三方地图 export function openMap(latitude,longitude,name){let url = "";if (plus.os.name = ...
基于Cesium使高德地图、百度地图、腾讯地图与天地图无偏移叠加
基于Cesium使高德地图.百度地图.腾讯地图与天地图无偏移叠加需求的产生方法的探索经验总结需求的产生在Cesium框架中,可以支持很多ImageryProvider,但是Viewer只用一 ...
高德地图只显示一个省_浅谈当下各种导航软件：高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
百度地图离线_“高德地图”和“百度地图”有什么差别? 专家: 细节决定成败!...
高德地图和百度地图是两款人气很高的导航软件,很多人想知道,高德地图和百度地图有什么不一样的.除了开发商的差异之外,在数据和功能上,它们也有很大不同.高德的导航功能非常强大,而百度的生活功能比较强悍. ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
百度地图infowindow的close事件_高德地图，百度地图，腾讯地图哪个更准？
先说结论高德第一,百度第二,腾讯第三这些地图商,他们是怎么知道"我家门口新开了一家咖啡店"这一事件的,并且标注上去还拍了照片呢?有些店新开了,有些店倒闭了,10年以前这条街上的 ...

高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线

高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线相关推荐

最新文章

热门文章