Google मानचित्र में उपयोगकर्ता द्वारा जेनरेट किए गए ज़ूम के लिए कैसे सुनें?

Question

मैं जानना चाहता हूं कि Google मानचित्र zoom_changed ईवेंट को +/- ज़ूम बटन के साथ उपयोगकर्ता इंटरैक्शन द्वारा विशेष रूप से निकाल दिया जाता है। यदि मैं zoom_changed के लिए एक सामान्य ईवेंट श्रोता का उपयोग करता हूं, तो मैं यह नहीं बता सकता कि यह उपयोगकर्ता द्वारा जेनरेट की गई घटना या फिटबाउंड() जैसी किसी चीज़ के कारण ज़ूम परिवर्तन है। ऐसा करने का सबसे अच्छा तरीका खोज रहे हैं।

1) घटना की जानकारी के लिए देखा पर zoom_changed:

मैं निम्नलिखित बातें, जिनमें से कोई भी काम करने के लिए लग रहे हैं की कोशिश की है। ऐसा कोई प्रतीत नहीं होता है।

2) माउसओवर और माउसआउट के लिए श्रोताओं को जोड़ें जो मुझे यह देखने के लिए ध्वज सेट करने दें कि उपयोगकर्ता मानचित्र सीमा में है या नहीं, और zoom_changed पर ध्वज की जांच करें। यह काम नहीं करता है क्योंकि नक्शा नक्शा फ्रेम के हिस्से के रूप में ज़ूम बटन पर विचार नहीं करता है (दूसरे शब्दों में, ज़ूम बटन पर होवर करना माउसआउट ईवेंट ट्रिगर करता है)।

3) ज़ूम बटन पर एक सामान्य (गैर-गैप) श्रोता जोड़ें। हालांकि, मुझे एक निश्चित सीएसएस चयनकर्ता नहीं मिल रहा है जो मुझे केवल बटन पकड़ने की अनुमति देगा।

4) जीमैप्स एपीआई में एक फ़ंक्शन की तलाश है जो मुझे getZoomElements() जैसी कुछ करने देगी, और फिर मैं इसका उपयोग करके श्रोताओं को सेट कर सकता हूं।

अजीब बात यह है कि अगर मैं मानचित्र पर कस्टम नियंत्रण जोड़ूं तो मैं स्पष्ट रूप से वह कर सकता हूं जो मैं चाहता हूं। ऐसा लगता है कि वे मुझे ज़ूम करने के लिए मजबूर करेंगे कि डिफ़ॉल्ट ज़ूम नियंत्रण में हुक रखने के बजाय।

Answer 1

मैं +/- बटन (या उस मामले के लिए अपने स्वयं के कस्टम नियंत्रण पर बटन) में बस नहीं लगाऊंगा। उपयोगकर्ता माउस व्हील के साथ मानचित्र पर ज़ूम बदल सकता है, या मानचित्र पर डबल-क्लिक करके बदल सकता है। इसके अलावा, आप दस्तावेजीकृत एपीआई के बजाय कार्यान्वयन विवरण पर भरोसा करेंगे, जो एक प्रमुख नंबर नहीं है।

यह वास्तव में केवल विश्वसनीय, प्रलेखित जूम में एक परिवर्तन का पता लगाने के रास्ते का मतलब Map की zoom_changed event को सुनने के लिए है।

अपने ईवेंट हैंडलर निर्धारित नहीं कर पाता कि क्या घटना उपयोगकर्ता कार्रवाई या एक API कॉल से आया है, वहाँ दो दृष्टिकोण है:

• एक API समारोह कॉल करने से पहले एक ध्वज सेट करें कि आप जानते हैं कि आप इस उपेक्षा कर सकते हैं परिवर्तन।
• क्या आप अपने ऐप को फिर से आर्किटेक्ट कर सकते हैं कि इससे कोई फर्क नहीं पड़ता कि ज़ूम परिवर्तन कोड या उपयोगकर्ता से आया है या नहीं?

Answer 2

मैं कस्टम congrol पर/बाहर में ज़ूम के लिए एक कस्टम नियंत्रण का उपयोग करने और घटना श्रोताओं तो उपयोग करने का सुझाव होगा:

http://goo.gl/u8gKC

आप आसानी से डिफ़ॉल्ट ज़ूम नियंत्रण छिपा सकते हैं:

http://goo.gl/N5HIE

(zoomControl विशिष्ट होना)

Answer 3

मैं वही काम करना चाहता था। मैं यह देखने की उम्मीद कर रहा था कि Google मानचित्र API में एक तरीका बनाया गया था, लेकिन कम से कम, जब आप मानचित्र को प्रारंभ करते हैं तो प्रारंभिक ज़ूम स्तर को चर के रूप में स्टोर करने में सक्षम होना चाहिए।फिर, getZoom() के परिणाम की तुलना यह जानने के लिए करें कि यह ज़ूम इन या ज़ूम आउट था या नहीं।

उदाहरण के लिए:

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 }); 
var previous_zoom = 11; 

google.maps.event.addListener(map,'zoom_changed',function(){ 
    if(map.getZoom() > previous_zoom) { 
    alert('You just zoomed in.'); 
    } 
    previous_zoom = map.getZoom(); 
} 

Answer 4

मैं अपने मानचित्र के लिए कस्टम ज़ूम बटन बनाने के द्वारा इस समस्या को हल किया।
संपादित:

यहाँ मेरी परियोजना से कोड है निकाला गया अनावश्यक और आत्म व्याख्यात्मक आम कोड

अपने zoomControl समारोह:

function zoomControl(map, div) { 

    var controlDiv = div, 
     control = this; 

    // Set styles to your own pa DIV 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the zoom in div. 
    var zoomIncrease = document.createElement('div'); 
    zoomIncrease.title = 'Click to zoom in'; 
    // etc. 

    // Set CSS for the zoom in interior. 
    var zoomIncreaseText = document.createElement('div'); 
    // Use custom image 
    zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>'; 
    zoomIncrease.appendChild(zoomIncreaseText); 

    // Set CSS for the zoom out div, in asimilar way 
    var zoomDecreaseText = document.createElement('div'); 
    // .. Code .. Similar to above 

    // Set CSS for the zoom out interior. 
    // .. Code .. 

    // Setup the click event listener for Zoom Increase: 
    google.maps.event.addDomListener(zoomIncrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom+1); 
     // Other Code parts 
    }); 

    // Setup the click event listener for Zoom decrease: 
    google.maps.event.addDomListener(zoomDecrease, 'click', function() { 
     zoom = MainMap.getZoom(); 
     MainMap.setZoom(zoom-1); 
    }); 
} 

अपने इनिशियलाइज़ समारोह:

function initializeMap() { 

    var latlng = new google.maps.LatLng(38.6, -98); 
    var options = { 
     zoom : 5, 
     center : latlng, 
     mapTypeId : google.maps.MapTypeId.ROADMAP, 
     // Other Options 
    }; 
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"), 
      options); 

    // The main part - Create your own Custom Zoom Buttons 
    // Create the DIV to hold the control and call the zoomControl() 
    var zoomControlDiv = document.createElement('div'), 
     zoomLevelControl = new zoomControl(MainMap, zoomControlDiv); 

    zoomControlDiv.index = 1; 
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv); 
} 

उम्मीद है कि यह

में मदद करता है

Answer 5

var zoomFlag = "user"; // always assume it's user unless otherwise 

// some method changing the zoom through API 
zoomFlag = "api"; 
map.setZoom(map.getZoom() - 1); 
zoomFlag = "user"; 

// google maps event handler 
zoom_changed: function() { 
    if (zoomFlag === "user") { 
    // user zoom 
    } 
}