文章/答案/技术大牛

发布

社区首页 >问答首页 >传单中的旋转标记

问传单中的旋转标记
EN

Stack Overflow用户

提问于 2012-11-21 13:45:30

回答 4查看 29.3K关注 0票数 17

如何在传单中旋转标记？我会有很多标记，都有一个旋转的角度。

我在Leaflet on GitHub的runanet/coomsie尝试过这个解决方案，但是我的标记没有发生任何变化：

L.Marker.RotatedMarker= L.Marker.extend({    
    _reset: function() {
        var pos = this._map.latLngToLayerPoint(this._latlng).round();

        L.DomUtil.setPosition(this._icon, pos);
        if (this._shadow) {
            L.DomUtil.setPosition(this._shadow, pos);
        }

        if (this.options.iconAngle) {
            this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
        }

        this._icon.style.zIndex = pos.y;
    },

    setIconAngle: function (iconAngle) {

        if (this._map) {
            this._removeIcon();
        }

        this.options.iconAngle = iconAngle;

        if (this._map) {
            this._initIcon();
            this._reset();
        }
    }

});

var rotated = new L.Marker.RotatedMarker([63.42, 10.39]);
rotated.setIconAngle(90);
rotated.addTo(map);

还有其他的想法或解决方案吗？(在Windows上用Firefox 16进行测试。)

javascript

rotation

icons

marker

leaflet

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-11-21 15:04:26

按照原样运行代码，当您尝试在Firefox中旋转它时，图标将消失(尝试在鼠标上旋转而不是在加载时，您将看到图标在尝试旋转之前出现)，但我敢打赌它将在webkit浏览器中工作(这是第一次)。原因是变换线：

this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';

Firefox还使用CSS转换来定位图标，因此在旋转之前，Moztransform的值将为“transforms (956 so，111 so)”。按照现在的方式，它将用“旋转(90deg)”代替它，而Firefox将不知道把图标放在哪里。

您希望Moztransform的值为“Moztransform(956 of，111 of)旋转(90 You )”，所以如果您使用此代码，它将在第一次工作，就像在webkit中一样。

this._icon.style.MozTransform = this._icon.style.MozTransform  + ' rotate(' + this.options.iconAngle + 'deg)';

但是，在下一次旋转时，它会中断，因此您确实需要一次性设置平移和旋转，如下所示：

this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';

然后，您可以在开始时摆脱L.DomUtil.setPosition(this._icon，pos)。

票数 7

Stack Overflow用户

发布于 2016-01-27 08:34:24

到目前为止，这个解决方案是最简单的：https://github.com/bbecquet/Leaflet.RotatedMarker

注意:它只修改现有的标记，允许另外两个选项(rotationAngle和rotationOrigin)。

解决方案效果很好。根据GitHub页面，一个用法示例：

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45
}).addTo(map);

票数 7

Stack Overflow用户

发布于 2015-07-30 13:09:09

对我来说，最有效的方法是向每个标记添加一个数据旋转=“角”属性。这允许您在每次刷新时在必要时调用以下JQuery语句：

    $('.your-marker-class').each(function () {            
        var deg = $(this).data('rotate') || 0;
        var rotate = 'rotate(' + $(this).data('rotate') + 'deg) scale(0.5,0.5)';
        $(this).css({
            '-webkit-transform': rotate,
            '-moz-transform': rotate,
            '-o-transform': rotate,
            '-ms-transform': rotate,
            'transform': rotate
        });
    });

它的工作速度非常快，使用了成百上千的标记。在互联网上的其他帖子中发现了这种方法，但在这里分享似乎也是正确的。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13494649

复制

相似问题

问传单中的旋转标记
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单中的旋转标记EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单中的旋转标记
EN