問題描述

如何在傳單中旋轉標記?我會有很多標記，都有一個旋轉角度.

How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle.

我在 Leaflet on GitHub 上嘗試了 runanet/coomsie 的這個解決方案，但我的標記沒有任何反應:

I've tried this solution from runanet/coomsie at Leaflet on GitHub, but nothing happens with my marker:

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 進行測試.)

Any other ideas or solutions? (Testing with Firefox 16 on Windows.)

推薦答案

按原樣運行代碼，當你嘗試在 Firefox 中旋轉它時，圖標會消失(嘗試在鼠標單擊而不是加載時旋轉，你會看到該圖標會在您嘗試旋轉它之前出現)，但我敢打賭它會(第一次)在 webkit 瀏覽器中工作.原因是變換線:

Running the code as it is, the icon will disappear when you try to rotate it in Firefox (try rotating on a mouseclick instead of on load and you will see that the icon appears before you try to rotate it), but I'm willing to bet it will work (the first time) in a webkit browser. The reason is the transform lines:

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 將具有例如translate(956px, 111px)"的值.按照現在的代碼方式，它將用簡單的rotate(90deg)"替換它，Firefox 將不知道將圖標放在哪里.

Firefox also uses CSS transforms to position icons, so before rotation it will have Moztransform will have a value of for example "translate(956px, 111px)". The way the code is now, it will replace that with simply "rotate(90deg)" and Firefox won't know where to place the icon.

您希望 Moztransform 的值為translate(956px, 111px) rotate(90deg)"，因此如果您使用此代碼，它會在第一次工作，就像在 webkit 中一樣.

You want Moztransform to have a value of "translate(956px, 111px) rotate(90deg)", so if you use this code it will work the first time, like in webkit.

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

但是，它會在下一次旋轉時中斷，因此您確實需要一次性設置平移和旋轉，如下所示:

However, it will break on the next rotate, so you really need to set both the translation and rotation in one go, like this:

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

然后你可以擺脫 L.DomUtil.setPosition(this._icon, pos);一開始.

Then you can get rid of the L.DomUtil.setPosition(this._icon, pos); at the start.

這篇關于在傳單中旋轉標記的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！