MapBox-जीएल-js - माउस घटनाओं सीएसएस मैप करने के लिए बदलने के लागू करने के बाद बंद कर रहे हैं

वोट
0

मैं एक संवेदनशील कंटेनर के अंदर एक नक्शा प्रदर्शित करने के MapBox-जीएल-js उपयोग कर रहा हूँ।

उत्तरदायी कंटेनर के आकार के बावजूद, मैं नक्शा ही संकल्प ऐसी है कि विंडो का आकार सीमा या ज़ूम नक्शा के स्तर को प्रभावित नहीं करता है बनाए रखना चाहते हैं, यह बस नक्शा मापता है जैसे कि यह एक स्थिर छवि थे।

मैं गतिशील पैमाने कारक की गणना और सीएसएस के माध्यम से कंटेनर पर लागू करके इस लक्ष्य को हासिल परिणत:

#map {
    width: 100%;
    height: 100%;
}
#map-scaler {
    width: 1280px;
    height: 1280px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: 0 0;
}
#map-container {
    background-color: #fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}


    <div id=map-container>
        <div id=map-scaler>
           <div id=map></div>
        </div>
    </div>


    // Get size of map container for display
    var mapContainer = $(#map-container);
    var mcWidth = mapContainer.width();
    var mcHeight = mapContainer.height();

    // Get size of scaler container
    var scaleContainer = $(#map-scaler);
    var sWidth = scaleContainer.width();
    var sHeight = scaleContainer.height();

    var scaleWidth = mcWidth / sWidth;
    var scaleHeight = mcHeight / sHeight;

    $(#map-scaler).css(transform, scale( + scaleWidth + ,  + scaleHeight + ));

यह वांछित परिणाम नेत्रहीन प्राप्त होता है। उदाहरण के लिए, मैं एक 1280x1280 नक्शा एक 500x500 कंटेनर के अंदर प्रदर्शित हो सकता है।

समस्या यह है कि सभी माउस घटनाओं अब बंद कर रहे हैं। उदाहरण के लिए, यदि आप एक नक्शा क्लिक या एक स्क्रॉल ज़ूम प्रयास, नक्शे अपने माउस घटना नक्शा गलत क्षेत्र के लिए लागू होता है।

मेरी सीएसएस के लिए बहुत परिणत जहां उपयोगकर्ता क्लिक किया है कि माउस घटनाओं सही तौर पर मैं कैसे भरपाई कर सकते हैं?

19/05/2016 को 01:35
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

आप आकार बदलने विधि का प्रयास कर सकते हैं? के रूप में दस्तावेज़ में mentionned, विधि अपने div चौड़ाई और ऊंचाई पर लग रहा है और अपने नक्शे का आकार बदलें। घटना भी अद्यतन किया जाना चाहिए।

https://www.mapbox.com/mapbox-gl-js/api/#Map#resize

23/05/2016 को 09:21
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more