Question

在我的旧传单应用程序中，我使用this code来旋转图标，它完美运行。现在，我试图将代码移动到react-leaflet，但无法弄清楚如何应用它。我知道它应该可以通过自定义组件，我试图在RotatedMarker上创建一些类型（基于src中的Marker.js），但是因为我对这一切都是新手，我无法让它工作...... 谁能指出我正确的方向？

谢谢，

亚历

Answer 1

确定。这就是我做的工作。不确定它应该以这种方式完成，但似乎有效。

export default class RotatedMarker extends Marker {

    componentDidMount() {

        super.componentDidMount();
        this.leafletElement.setIconAngle(this.props.rotation);
    }


    componentWillUpdate(nextProps, nextState) {
        if (nextProps.rotation) {
            this.leafletElement.setIconAngle(nextProps.rotation);
        }
    }
}

Answer 2

我制作了bbecquet的传单旋转标记的反应包装：https://github.com/verdie-g/react-leaflet-rotatedmarker

import RotatedMarker from 'react-leaflet-rotatedmarker'

<RotatedMarker position={position} rotationAngle={180} rotationOrigin={'center'} />

Answer 3

我找到了另一种方法，尝试像这样构造图标：

var icon = L.divIcon({
    iconSize: [20, 20],
    iconAnchor: [10, 10],
    className: 'yourClassName',
    html: `<img 
    style="transform: rotate(80deg);"
    height="20" 
    width="20" 
    src='path/to/icon'>`
})

然后将其添加到您的标记中：

<Marker position={position} icon={icon} />

React-Leaflet旋转图标

3 个答案: