哎呀，老铁们，今天咱就说个有趣的——uni-app里leaflet地图上让图标旋转的事儿。这玩意儿kan似简单，但搞起来还真有点门道，跟你聊聊我的经历吧。

哈哈，说起这事儿，得从我Zui近Zuo的那个导航项目说起。你懂的，地图上有一个箭头指向哪儿，车辆朝哪儿走，显示方向什么的。Ru果图标不旋转的话，kan着就跟死掉似的！

一开始我就傻了——uni-app用leaflet实现地图是Ke以了,但是如何让图标旋转呢？

leaflet本身并不直接支持marker旋转,得找其他办法。我先是百度了一通,结果发现好多博客文章dou不收录...那什么情况啊？害！后来才知道,可Neng是内容质量不行或者SEO没Zuo好,搜索引擎觉得那玩意儿没啥价值。

"Trae哥,这个事儿怎么办呀？"

"简单嘛,给marker加个className,然后通过CSS设置transform属性rotate就行啦！"

"真的假的？这么简单？"

"当然啦！试试呗~"

javascript createLocationIcon { const icon = L.icon({ iconUrl: 'static/icon/location.png', iconSize: , iconAnchor: , popupAnchor: , className: 'test-location' // 加个className }); this.locationIcon = L.marker(, { icon: icon }).addTo; },

updateLocation { // 计算角度 const bearing = this.calculateBearing( that.location.latitude, that.location.longitude, that.testPosition.latitude, that.testPosition.longitude ); const icon = document.querySelector; icon.style.transform = rotate; }

css .test-location { transition: transform 0.3s ease; /* 加点动画 */ }

"不对不对...这样操作DOM总觉得有点怪怪的..."

"那咱用插件呗！leaflet.rotatedMarker就是干这个用的！"

javascript // 在项目根目录static文件夹下放入插件文件leaflet.rotatedMarker.js

// 在代码中导入 import rotated from "@/static/leaflet/leaflet.rotatedMarker.js";

// 初始化时设置rotationAngle属性 createLocationIcon { const icon = L.icon({ iconUrl: 'static/icon/location.png', iconSize: , rotationAngle: -90 // 默认朝北方向为正方向 });

this.locationIcon = L.marker; }

// 每次geng新位置时调整角度即可！ updateLocation { const bearing = calculateBearing; this.locationIcon.setRotationAngle; }

- 第一种方法需要手动操作DOM和CSS样式表变化； - 第二种方法直接使用插件接口geng简洁优雅； - 性Neng方面两者差别不大但第二种geng符合Leaflet风格。

: 增加transition属性Neng让旋转动画geng平滑哦;

: 想要正确显示方向必须正确计算角度哦;

: 操作DOM方式在某些场景可Neng会出现兼容性问题;

: 用第二种方法吧!简洁又高效!

Zui后还是想说句——技术世界真奇妙啊!. 一开始啥dou不会的时候觉得天塌下来一样惨; 后来发现其实hen多事情dou有现成解决方案; 再后来慢慢学会自己思考如何优化和改进. 这就是编程之美!也是我们程序员永远追求之路!.