一 前言
在使用百度地图开发的过程中,查阅百度地图官网 demo 基本上就能满足开发的需求,但是有时候需要设置一些东西,很难在官网上查阅到相关的方法技巧.笔者特意把开发过程中遇到的一些疑难杂症和解决方式总结出来写成这篇文章,供大家参考.
二 正文
1. 设置完全透明
测试实例:多边形 (polygon) 圆 (circle)
出现的问题:配置对象 ( PolygonOptions )fillOpacity 设置为 0; 仍然会出线白色填充,没有实现完全透明:
const points = [ ... ];//一系列百度坐标
const opts = {fillOpacity:0,strokeColor:balck,strokeOpacity:1};
const polygon = new BMap.Polygon(points,opts);
结果:
方法:使用 setFillColor 设置填充
const polygon = new BMap.Polygon(...opts);//创建多边形实例
polygon.setFillColor('');//设置多边形填充完全透明
2. 添加地面叠加层
测试实例:地面叠加层 (GroundOverlay)
出现的问题:按照类参考的参数配置 ( GroundOverlayOptions ),并没有加载出图片.
const opts = {
opacity: 1,
imageURL: 'http://lbsyun.baidu.com/jsdemo/img/si-huan.png',
displayOnMinLevel: 0,
displayOnMaxLevel: 20,
};
const groundOverlay = new BMap.GroundOverlay(bounds, opts);
后来查看官方 demo 才发现如何配置:setImageURL
// 西南角和东北角
var SW = new BMap.Point(116.29579,39.837146);
var NE = new BMap.Point(116.475451,39.9764);
groundOverlayOptions = {
opacity: 1,
displayOnMinLevel: 10,
displayOnMaxLevel: 14
}
// 初始化GroundOverlay
var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
// 设置GroundOverlay的图片地址 groundOverlay.setImageURL('http://lbsyun.baidu.com/jsdemo/img/si-huan.png');
3. 跟随地图放缩
百度地图上 Marker 类型设置简单,可以使用自己定义的图标,还支持对图标的偏移和旋转,但是因为它只根据了一个中心点,造成了一个问题,设置的图标自身不支持跟随地图进行放缩.这样就造成了在特定场景下无法满足业务的需求.
百度地图地面叠加层 GroundOverlay 可以设置自己的图标,因为它是根据经纬度范围设置的,所以支持跟随地图放缩.但是在 javascript 开发中它并不支持对图形的旋转.图形的旋转可以用 C++ 或者 JAVA 对图形矩阵做变换得到.所以想要支持旋转的就无法实现了.
如果我想设计一个既支持放缩,又能设置旋转的旗标,那该怎么办呢?
有一种方案:
Marker + addEventListener('zoomEnd',function(){}); 使用 Marker 类型,并且监听地图放缩事件,动态设置图标大小.
三 后记
使用百度地图就要遵守百度地图的上支持的方法方式,目前百度地图在图层重叠时的层级显示问题并没有做出用户自定义设置方案,对于 label 和 marker 倒是暴露了 setZindex 方法设置自己的层级.希望百度地图能够越来越强大,这样开发者就可以愉快的开发了~
来源: https://segmentfault.com/a/1190000012889136