L'intégration de Google Maps dans vue.js
J'ai essayé d'initialiser une carte Google map sur mon vue.js projet tout en incluant le script :
<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>
Le problème est que ma .vue fichiers ressembler à ça :
<template>
...
</template>
<script>
...
</script>
Et je ne peux pas comprendre plus d'une balise script dans ma vue de fichier, je peux afficher la carte en passant par le index.html mais je n'ai pas vraiment envie de mettre js sur le index.html, + je ne peux pas le point le script de callback sur une vue de la méthode.
Avez-vous quelques idées sur la façon de montrer que la carte à l'aide d'un .vue de fichier ? J'ai fait d'utiliser vue2-google-maps, mais j'aimerais utiliser l'original de google map.
J'ai un violon qui est en train de faire quelque chose de ok : https://jsfiddle.net/okubdoqa/ sans l'aide d'un rappel dans la balise script, mais il ne marche pas pour moi ... Merci
OriginalL'auteur Loïc Monard | 2017-06-19
Vous devez vous connecter pour publier un commentaire.
C'est un peu pointilleux pour obtenir ce travail sans l'aide d'une bibliothèque, et il y a probablement plus propre les moyens, mais vous pouvez simplement importer la bibliothèque et à utiliser dans votre composants, si vous voulez obtenir en place et fonctionne.
Tout d'abord, ne pas utiliser le
defer
&async
options dans le<script>
tag. De le charger dans leindex.html
:Ensuite dans votre composant, vous pouvez accéder au global
google
et de passer d'un élément une fois que le composant est installé. Par exemple à l'aide de l'installation à partir de l'Vuejs de la cli:Ok tant pis je viens de mettre le script dans la balise head de l'index au lieu du corps et cela a fonctionné
Cette erreur de référence est à venir à partir de ESLint. Ajouter google comme une variable globale stackoverflow.com/a/30400159
Vous pouvez utiliser
async & defer
, voir C2486 réponse et mon commentaire ci-dessus.OriginalL'auteur Mark Meyer
Je suggérerais à l'aide de npm google-maps au lieu d'ajouter un script dans index.html. Vous ne pourriez pas besoin de faire appel à google maps API dans toutes les pages, et je dirais qu'il est préférable d'utiliser Webpack correctement. Vous pouvez utiliser
npm install google-maps
OriginalL'auteur j-printemps
J'étais à la recherche pour un autre problème et trouvé celui-ci, il est une autre façon que vous pouvez obtenir sans avoir à ajouter dans
index.html
.J'ai fait face à un problème similaire où j'ai dû utiliser deux API Google clés pour différents environnements afin de coder en dur dans
index.html
n'était pas une bonne idée, je l'ai fait si ça aide quelqu'un -main.js
MapElem.vue
C'est assez simple, vous écrivez une Promesse main.js qui permettra de résoudre à la fonction de rappel lancé par Google script ( qui nous dynamiquement ajoutés à l'organisme ). Une fois la Promesse est résolu, vous pouvez accéder à l'objet map dans votre composant.
OriginalL'auteur Vishnu Nair
Il y a une autre façon, si vous souhaitez garder le code contenu dans un Composant à l'aide de la async chargeur de $Scriptjs.
Installer via npm
importer dans votre composant
charger le script dans le montage du crochet (en supposant que vous avez une méthode dans votre composant appelé initMap)
OriginalL'auteur ege
Meilleur et le moyen simple d'intégrer Google Maps à Vue est d'utiliser des mnp libs.
Vous avez besoin d'utiliser vue-google-maps
puis,
Simplement de coller le code ci-dessous:
OriginalL'auteur Max Sherbakov