百度地图自定义覆盖物自定义字体图标动态修改图标颜色

原创

已于 2022-03-21 18:29:58 修改 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #百度地图

于 2022-03-21 18:26:07 首次发布

这篇博客介绍了如何使用字体图标和JavaScript实现百度地图上的动态自定义覆盖物。通过创建`ComplexCustomOverlay`类，实现了覆盖物的位置、大小、颜色和旋转角度的动态设置，并且添加了事件监听功能。示例展示了如何创建一个带有旋转箭头的标记，并将其添加到地图上。

实现效果：

在这里插入图片描述
图标用的是字体图标，为了方便动态改变颜色

关键代码

	function ComplexCustomOverlay(params) {
   
   
	    let defaultParams = {
   
   
	        point: {
   
    lng: 0, lat: 0 },
	        fontSize: 28,
	        deg: 0,
	        className: '',
	        color: 'red',
	    };
	    defaultParams = Object.assign(defaultParams, params);
	    this._point = defaultParams.point; // 坐标
	    this._fontSize = defaultParams.fontSize; // 字体图标大小
	    this._deg = defaultParams.deg; // 旋转角度
	    this._className = defaultParams.className