vue.js में गूगल मैप्स का घालमेल

Question

मैं स्क्रिप्ट सहित जबकि मेरी vue.js परियोजना पर एक गूगल मानचित्र को प्रारंभ करने की कोशिश कर रहा है:

<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script> 

समस्या यह है कि मेरी .vue फ़ाइलें जो की तरह लग रही है:

<template> 
    ... 
</template> 

<script> 
    ... 
</script> 

और मैं अपने Vue फ़ाइल में एक से अधिक स्क्रिप्ट टैग शामिल कर सकते हैं नहीं, मैं नक्शा दिखा सकते हैं index.html से गुजर रहा है, जबकि, लेकिन मैं वास्तव में index.html पर js रखना चाहते हैं न, + मैं एक vue विधि पर स्क्रिप्ट कॉलबैक इंगित नहीं कर सकता।

तुम लोग कैसे है कि नक्शे में दिखाने के लिए एक .vue फ़ाइल का उपयोग करने पर कुछ विचार है? मैंने vue2-google-maps का उपयोग किया लेकिन मैं मूल Google मानचित्र का उपयोग करना चाहता हूं।

मैं एक बेला जो कुछ ठीक कर रही है है: स्क्रिप्ट टैग में एक कॉलबैक का उपयोग किए बिना https://jsfiddle.net/okubdoqa/ है, लेकिन यह मेरे लिए काम नहीं करता है ... धन्यवाद

Answer 1

यह एक पुस्तकालय का उपयोग किए बिना इस काम कर पाने के लिए एक छोटे से उधम मचाते है , और संभवतः क्लीनर तरीके हैं, लेकिन आप आसानी से पुस्तकालय आयात कर सकते हैं और इसे अपने घटकों में उपयोग कर सकते हैं यदि आप उठना और दौड़ना चाहते हैं।

पहले, <script> टैग में defer & async विकल्पों का उपयोग नहीं करते। index.html में लोड:

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

फिर अपने घटक में आप वैश्विक google उपयोग कर सकते हैं और एक बार घटक सेटअप है यह एक तत्व गुजरती हैं। उदाहरण Vuejs CLI से सेटअप का उपयोग के लिए:

<template> 
    <div class="hello"> 
    <h1>{{ msg }}</h1> 

    <div id="myMap"></div> 
    </div> 
</template> 

<script> 
export default { 
    name: 'hello', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    }}, 
    mounted: function() { 
     console.log("map: ", google.maps) 
      this.map = new google.maps.Map(document.getElementById('myMap'), { 
      center: {lat:61.180059, lng: -149.822075}, 
      scrollwheel: false, 
      zoom: 4 
      }) 
    } 

} 
</script> 
<style scoped> 
    #myMap { 
    height:300px; 
    width: 100%; 
    } 
</style> 

Answer 2

मैं बजाय npm google-maps का उपयोग कर index.html में एक स्क्रिप्ट जोड़ने का सुझाव चाहते हैं। आपको प्रत्येक पृष्ठ में Google-Maps API को कॉल करने की आवश्यकता नहीं हो सकती है, और मैं कहूंगा कि वेबपैक का सही उपयोग करना बेहतर है। आप उपयोग कर सकते हैं npm install google-maps

import GoogleMapsLoader from 'google-maps' 

mounted: function() { 
    GoogleMapsLoader.load(function(google) { 
    let map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: position 
    }) 
    }) 
}