Dans cet article, nous verrons comment intégrer Google Maps à notre application Vue 3. Nous utiliserons la bibliothèque vue3-google-map.
Ajouter Google Maps dans une application Vue 3
Nous pouvons ajouter Google Maps dans notre application Vue 3 avec certaines bibliothèques intégrées. Une bibliothèque que nous pouvons utiliser pour ajouter Google est la bibliothèque vue3-google-map. Pour l’installer, nous exécutons
npm install -S vue3-google-map
avec npm.
Ensuite on peut ajouter une carte Google basique avec un marqueur en écrivant :
<template>
<GoogleMap
:api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="15"
>
<Marker :options="{ position: center }" />
</GoogleMap>
</template>
<script>
import { GoogleMap, Marker } from "vue3-google-map";
const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
name: "App",
components: { GoogleMap, Marker },
data() {
const center = { lat: 40.689247, lng: -111.044502 };
return { center, YOUR_GOOGLE_MAPS_API_KEY };
},
};
</script>
YOUR_GOOGLE_MAPS_API_KEY
est la clé API permettant d’utiliser l’API Google Maps.
La clé API peut être obtenue en allant sur https://developers.google.com/maps/documentation/javascript/get-api-key et en suivant les instructions. Les informations de carte de crédit sont nécessaires pour obtenir une clé, même si nous souhaitons simplement bénéficier d’un essai gratuit.
Nous ajoutons la carte avec le GoogleMap
composant. Nous définissons le centre de la carte avec le center
prop et le zoom par défaut avec le zoom
soutenir. Et nous avons un marqueur sur la carte avec le Marker
composant.
Nous définissons les coordonnées du marqueur en définissant le options
accessoire à { position: center }
. De plus, nous devons définir la largeur et la hauteur de la carte pour que la carte soit rendue.
Nous pouvons en ajouter davantage aux marqueurs. Une chose que nous pouvons ajouter, ce sont les fenêtres d’informations. Pour ce faire, nous utilisons le InfoWindow
composant.
Pour l’utiliser, on écrit :
<template>
<GoogleMap
:api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="10"
>
<Marker :options="{ position: center }">
<InfoWindow>
<div id="content">
<h1 id="firstHeading" class="firstHeading">Denver</h1>
<div id="bodyContent">
<p>
Denver is a consolidated city and county, the capital, and most
populous city of the U.S. state of Colorado
</p>
</div>
</div>
</InfoWindow>
</Marker>
</GoogleMap>
</template>
<script>
import { GoogleMap, Marker, InfoWindow } from "vue3-google-map";
const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
name: "App",
components: { GoogleMap, Marker, InfoWindow },
data() {
const center = { lat: 39.739, lng: -104.984 };
return { center, YOUR_GOOGLE_MAPS_API_KEY };
},
};
</script>
Nous imbriquons simplement le InfoWindow
composant au sein du Marker
composant afin que la fenêtre d’informations s’affiche lorsque le marqueur est cliqué.
Les classes ajoutées sont les classes intégrées de l’API Google Map afin que la fenêtre d’informations ait des styles.
Un groupe de marqueurs peut être ajouté facilement. Nous utilisons le MarkerCluster
et Marker
Composants
Par exemple, nous pouvons écrire :
<template>
<GoogleMap
:api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="10"
>
<MarkerCluster>
<Marker
v-for="(location, i) in locations"
:options="{ position: location }"
:key="i"
/>
</MarkerCluster>
</GoogleMap>
</template>
<script>
import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map";
const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
name: "App",
components: { GoogleMap, Marker, MarkerCluster },
data() {
const center = { lat: 37.739, lng: -111.1 };
const locations = [
{ lat: 37.75, lng: -111.116667 },
{ lat: 37.759859, lng: -111.128708 },
{ lat: 37.765015, lng: -111.133858 },
{ lat: 37.770104, lng: -111.143299 },
{ lat: 37.7737, lng: -111 - 111187 },
{ lat: 37.774785, lng: -111.137978 },
{ lat: 37.819616, lng: 144.968119 },
{ lat: 38.330766, lng: 144.695692 },
{ lat: 39.927193, lng: 175.053218 },
{ lat: 41.330162, lng: 174.865694 },
{ lat: 42.734358, lng: 147.439506 },
{ lat: 42.734358, lng: 147.501315 },
{ lat: 42.735258, lng: 147.438 },
{ lat: 43.999792, lng: 170.463352 },
];
return { center, locations, YOUR_GOOGLE_MAPS_API_KEY };
},
};
</script>
Nous venons de mettre le Marker
est à l’intérieur du MarkerCluster
composant pour restituer un groupe de marqueurs. Avec cela, nous verrons le nombre de clusters dans une zone lorsque nous effectuerons un zoom arrière au lieu d’un tas de marqueurs.
Ajouter plus de fonctionnalités cartographiques à la carte
Nous pouvons ajouter plus de fonctionnalités à la carte. Par exemple, nous pouvons ajouter un chemin polyligne à la carte avec le Polyline
composant.
Pour ce faire, nous écrivons :
<template>
<GoogleMap
:api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="3"
>
<Polyline :options="flightPath" />
</GoogleMap>
</template>
<script>
import { GoogleMap, Polyline } from "vue3-google-map";
const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
name: "App",
components: { GoogleMap, Polyline },
data() {
const center = { lat: 0, lng: -122 };
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = {
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
};
return { center, flightPath, YOUR_GOOGLE_MAPS_API_KEY };
},
};
</script>
Il suffit de définir les valeurs du trait et les coordonnées du chemin avec un tableau d’objets avec le lat
et lng
propriétés avec la latitude et la longitude, respectivement.
Les autres fonctionnalités cartographiques disponibles incluent des polygones, des rectangles, des cercles et bien plus encore.
Événements de la carte
Les composants de la bibliothèque vue3-google-map émettent des événements intégrés que nous pouvons gérer.
Pour ajouter un gestionnaire d’événements pour un composant, nous pouvons écrire quelque chose comme :
<template>
<GoogleMap
:api-key="YOUR_GOOGLE_MAPS_API_KEY"
style="width: 100%; height: 500px"
:center="center"
:zoom="3"
>
<Polyline :options="flightPath" @click="onClick" />
</GoogleMap>
</template>
<script>
import { GoogleMap, Polyline } from "vue3-google-map";
const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
name: "App",
components: { GoogleMap, Polyline },
data() {
const center = { lat: 0, lng: -122 };
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = {
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
};
return { center, flightPath, YOUR_GOOGLE_MAPS_API_KEY };
},
methods: {
onClick(e) {
const { lat, lng } = e.latLng;
alert(`${lat()}, ${lng()}`);
},
},
};
</script>
Nous ajoutons un Polyline
sur notre carte comme nous le faisions auparavant. Mais nous ajoutons un gestionnaire d’événements de clic au Polyline
avec le @click
directive et configurez-la pour qu’elle appelle onClick
lorsque l’on clique sur la polyligne.
Dans onClick
on obtient la latitude et la longitude sur lesquelles on a cliqué avec le e.latLng.lat
et e.latLng.lng
fonction respectivement.
Il existe de nombreux autres événements émis par les composants, nous pouvons donc faire bien plus que gérer les clics sur une entité cartographique.
Conclusion
Nous pouvons facilement ajouter une carte Google Map dans notre application Vue 3 avec le vue3-google-map
bibliothèque et une API Google Map.
Il est livré avec de nombreux composants, dont la plupart émettent des événements que nous pouvons gérer pour que la carte fasse ce dont nous avons besoin.
Source link