ब्राउज़रify का उपयोग करते समय Google मानचित्र के लिए कॉलबैक फ़ंक्शन का खुलासा कैसे करें?

Question

मैं अपने जावाScripts को बंडल करने के लिए गुलप और ब्राउजरिफ़ का उपयोग कर रहा हूं। मुझे एक कॉलबैक फ़ंक्शन का खुलासा करने की आवश्यकता है जिसे Google मानचित्र API लोड के बाद निष्पादित किया जाना चाहिए।

यह window.initMap जैसे कुछ उपयोग किए बिना कैसे किया जा सकता है? इसके साथ समस्या यह है कि मुझे initMap के अंदर बड़ी संख्या में अन्य विधियों को आग लगाना होगा, इसलिए window.functionName और वैश्विक नेमस्पेस को प्रदूषित करने के अलावा इसे करने का बेहतर तरीका होना चाहिए।

दूसरी तरफ, क्या यह callback पैरामीटर को बाहर करने के लिए ठीक है और इसके बजाय ऐसा कुछ करने के लिए ठीक है?

$.getScript('https://maps.googleapis.com/maps/api/js').done(function() { 
    initMap(); 
}); 

किसी भी मदद की सराहना की जाएगी। मैंने और अधिक समय बिताया है कि मैं इसे काम करने में कभी स्वीकार करूंगा।

gulpfile.js:

gulp.task('browserify', ['eslint'], function() { 
    return browserify('/src/js/main.js') 
    .bundle() 
    .pipe(source('main.js')) 
    .pipe(buffer()) 
    .pipe(gulp.dest('/dist/js')) 
    .pipe(reload({ stream: true })); 
}); 

main.js:

require('jquery'); 
require('./map'); 

map.js:

var map = (function() { 
    'use strict'; 

    var mapElement = $('#map'); 

    function googleMapsAPI() { 
    $.getScript('https://maps.googleapis.com/maps/api/js?callback=initMap'); 
    } 

    function initMap() { 
    var theMap = new google.maps.Map(mapElement); 
    // functions... 
    } 

    function init() { 
    googleMapsAPI(); 
    } 
}); 

map.init(); 

Answer 1

नहीं, callback पैरामीटर शामिल नहीं करना ठीक नहीं है।

Google मानचित्र API लाइब्रेरी पृष्ठ पर लोड होने वाली अन्य स्क्रिप्ट्स का एक गुच्छा कहता है और फिर, जब वे सभी लोड हो जाते हैं, तो callback पैरामीटर विंडो ऑब्जेक्ट पर कॉल किया जाता है।

बस window वस्तु पर यह घोषणा:

var MyApp = { 
    init: function() { 
     //all your stuff 
    } 
} 

window.initMap = function() { 
    window.initMap = null; //set this to null this so that it can't get called anymore....if you want 
    MyApp.init(); 
}; 

और फिर बस अपने पृष्ठ पर स्क्रिप्ट टैग में शामिल हैं:

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 2

मैं ईमानदारी से यहाँ लगता है कि यह सिर्फ एक परिभाषित करने के लिए एक बेहतर समाधान है Google मानचित्र एसिंक्रोनस प्रारंभिकरण का लाभ उठाते समय वैश्विक initMap फ़ंक्शन को सरल रखने के लिए फ़ंक्शन। यह एक हैक की तरह लग सकता है, लेकिन आप फ़ंक्शन के लिए यादृच्छिक नाम परिभाषित कर सकते हैं और फिर Google मानचित्र एसडीके ने इसे कॉल करने के बाद इसे वैश्विक दायरे से हटा दें। यह तंत्र JSONP में उपयोग किए गए एक जैसा है।

var functionName = getRandomName(); 
window[functionName] = function() { 
    window[functionName] = undefined; 
    // call to your initialization functions 
}; 

this answer में आप वैश्विक क्षेत्र प्रदूषण गूगल के नक्शे स्क्रिप्ट लोड तुल्यकालिक बनाने के लिए, क्या उपयोगकर्ता अनुभव को क्षति पहुंचा सकता है, विशेष रूप से, स्मार्ट फ़ोन पर है को रोकने के लिए उस तरह से देख सकते हैं।

Answer 3

आप स्क्रिप्ट लोड और फिर जब कुछ करना चाहते हैं स्क्रिप्ट लोड हो गई है, script इंजेक्शन करते समय आप गुण async और onload सेट कर सकते हैं। सभी कोड को IIFE में लपेटकर हम आईआईएफई के अंदर परिभाषित निजी सभी वस्तुओं को रखेंगे, वैश्विक नामस्थान window पॉप्युलेट करने से परहेज करते हैं।निम्नलिखित उदाहरण देखें:

// IIFE (Immediately-Invoked Function Expression) 
// Keeps all private 
!function() { 
/** 
* Injects the script asynchronously. 
* 
* @param {String} url: the URL from where the script will be loaded 
* @param {Function} callback: function executed after the script is loaded 
*/ 
function inject(url, callback) { 
    var tag = 'script', 
    script = document.createElement(tag), 
    first = document.getElementsByTagName(tag)[0]; 
    script.defer = script.async = 1; // true 
    script.type = 'text/javascript'; 
    script.src = url; 
    script.onload = callback; 
    first.parentNode.insertBefore(script, first); 
} 

/** 
* Injects and initializes the google maps api script. 
*/ 
function injectMapsApi() { 
    var key = 'your-api-key'; 
    var query = '?key=' + key; 
    var url = 'https://maps.googleapis.com/maps/api/js' + query; 
    inject(url, initMapsApi); 
} 

/** 
* Callback that initializes the google maps api script. 
*/ 
function initMapsApi() { 
    var maps = window.google.maps; 
    // ... code initializations 
    console.log(maps); 
} 

injectMapsApi(); 

}(); // end IIFE 

आप रजिस्टर और व्यवस्था गूगल मैप्स एपीआई का उपयोग करने में आप API कुंजी का दावा करने की जरूरत है। यहाँ अधिक जानकारी:

• https://developers.google.com/maps/documentation/javascript/get-api-key
• https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

नवीनतम प्रश्न

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 संबंधित मुद्दे

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.