पत्रक

Question

में मार्कर घुमाएं मैं पुस्तिका में मार्कर कैसे घुमा सकता हूं? मेरे पास घूर्णन कोण के साथ बहुत सारे मार्कर होंगे।

मैं 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); 

कोई अन्य विचार या समाधान? (विंडोज़ पर फ़ायरफ़ॉक्स 16 के साथ परीक्षण।)

Answer 1

कोड को चलाने के दौरान, आइकन फ़ायरफ़ॉक्स में घुमाने की कोशिश करते समय गायब हो जाएगा (लोड पर बजाए माउसक्लिक पर घूमने का प्रयास करें और आप देखेंगे कि आइकन दिखाई देता है इससे पहले कि आप इसे घुमाने की कोशिश करें), लेकिन मैं शर्त लगा सकता हूं कि यह वेबकिट ब्राउज़र में काम करेगा (पहली बार)। कारण लाइनों को बदलने है:

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

फ़ायरफ़ॉक्स भी सीएसएस स्थिति प्रतीक को बदल देती है का उपयोग करता है, इसलिए रोटेशन से पहले यह होगा Moztransform "का अनुवाद (956px, 111px)" के उदाहरण के लिए एक मूल्य होगा। जिस तरह से कोड अब है, वह इसे "घुमाने (90 डिग्री)" के साथ प्रतिस्थापित करेगा और फ़ायरफ़ॉक्स को यह नहीं पता होगा कि आइकन कहां रखा जाए।

आप चाहते हैं कि Moztransform के पास "अनुवाद (956px, 111px) rotate (90deg)" का मान हो, इसलिए यदि आप इस कोड का उपयोग करते हैं तो यह पहली बार वेबकिट की तरह काम करेगा।

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); शुरू में।

Answer 2

मेरे लिए बहुत अच्छा काम करता है प्रत्येक मार्कर को डेटा-रोटेट = "[कोण]" विशेषता जोड़ रहा है। बहुत तेजी से और मार्कर के सैकड़ों/हजारों के साथ

$('.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 
     }); 
    }); 

काम करता है: यह आपको प्रत्येक रीफ्रेश जब आवश्यक पर निम्नलिखित JQuery बयान कॉल करने के लिए अनुमति देता है। इस विधि को किसी अन्य पोस्ट में कहीं भी इंटरनेट पर मिला लेकिन मुझे यहां साझा करने का अधिकार भी लगा। https://github.com/bbecquet/Leaflet.RotatedMarker

नोट::

Answer 3

यह समाधान अब तक का सबसे आसान है यह केवल मौजूदा मार्कर को संशोधित करता है, दो और अधिक विकल्प (rotationAngle और rotationOrigin) की इजाजत दी।

समाधान बहुत अच्छी तरह से काम करता है। गिटहब पेज के अनुसार, एक उपयोग उदाहरण:

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