Integracja z Google Maps w vue.js

Question

Próbowałem zainicjować mapę Google w moim projekcie vue.js podczas gdy w tym skrypcie:

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

Problem polega na tym, że moje .vue pliki wyglądać tak:

<template> 
    ... 
</template> 

<script> 
    ... 
</script> 

I nie może zawierać więcej niż jeden znacznik skryptu w moim pliku vue, mogę pokazać mapę podczas przechodzenia przez index.html ale ja naprawdę nie chcę umieścić js na index.html + Nie mogę wskazać wywołania zwrotnego skryptu w metodzie vue.

Czy macie jakieś pomysły na pokazanie tej mapy za pomocą pliku .vue? Użyłem map vue2-google, ale chciałbym użyć oryginalnej mapy google.

Mam skrzypce który robi coś OK: https://jsfiddle.net/okubdoqa/ bez użycia wywołania zwrotnego w tagu skryptu, ale nie robi to dla mnie ... Dzięki

Answer 1

To trochę wybredny uzyskać tej pracy bez korzystania z biblioteki i są prawdopodobnie czystsze sposoby, ale możesz po prostu zaimportować bibliotekę i użyć jej w swoich komponentach, jeśli chcesz zacząć działać.

Po pierwsze, nie używaj opcji defer & w znaczniku <script>. Załadować go w index.html:

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

Następnie w składniku można uzyskać dostęp do globalnego google i przekazać go elementu, gdy składnik jest ustawiony. Na przykład przy użyciu konfiguracji z CLI Vuejs:

<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

Sugeruję użyciu npm google-maps zamiast dodawać skrypt w pliku index.html. Może nie być konieczne wywoływanie interfejsu API map Google na każdej stronie, a powiedziałbym, że lepiej jest używać Webpack poprawnie. Można użyć 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 
    }) 
    }) 
}