旋轉小冊子中的標記

如何在小冊子中旋轉標記？我會有很多標記，全部都有旋轉角度。旋轉小冊子中的標記

我試過在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進行測試。）

來源

2012-11-21 sindrejh

按照原樣運行代碼，當您嘗試在Firefox中旋轉圖標時，圖標會消失（嘗試在鼠標點擊而不是加載時旋轉，您會看到圖標出現然後再嘗試旋轉它），但我敢打賭，它將在webkit瀏覽器中工作（第一次）。原因是轉換線：

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

火狐也使用CSS轉變爲位置的圖標，所以旋轉將收到Moztransform將有例如「翻譯（956px，111px）」的值。現在的代碼的方式，它將取代只是「旋轉（90deg）」和Firefox不知道在哪裏放置圖標。

您希望Moztransform具有「translate（956px，111px）rotate（90deg）」的值，因此如果您使用此代碼，它將在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)';

然後你就可以擺脫升.DomUtil.setPosition（this._icon，pos）;在開始時。

來源

2012-11-21 15:04:26 robpvn

您的回答幫了我很多，只剩下一個問題：其實我的圖標在第一次繪製時根本不旋轉。試着用「setIconAngle」改變點擊的角度，這個測試對你在代碼中的改變非常有效。但爲什麼我的iconAngle不是第一次使用？ – sindrejh

使用this._reset（）將標記中的onAdd函數擴展爲解決方法，以便從頭開始旋轉圖標。 – sindrejh

有用的代碼和答案。我已經實施了這個解決方案 - 但我有一個問題。無論何時我在地圖上放大/縮小，標記的旋轉角度都會重置爲0度。你有同樣的問題嗎？當地圖放大/縮小時，標記是否有任何重置其角度的原因？ –

對我來說很好的做法是給每個標記添加一個data-rotate =「[angle]」屬性。這允許您在必要時在每次刷新時調用以下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 
     }); 
    });

工作速度非常快，並帶有數百/數千標記。在互聯網上的某個其他帖子中找到了這種方法，但似乎也適合在這裏分享。

來源

2015-07-30 13:09:09

該解決方案是目前最簡單的：https://github.com/bbecquet/Leaflet.RotatedMarker

注：它只改變現有的標記，使兩個選項（rotationAngle和rotationOrigin）。

該解決方案工作得很好。根據GitHub頁面，一個用法示例：

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

來源

2016-01-27 08:34:24 ThinusP

旋轉小冊子中的標記

回答

相關問題