Google Maps s'est avéré être un service Google très réussi, incorporant une gamme d'outils inestimables tels que Street View, Route Planning et Google Traffic. De nombreuses entreprises et organisations comptent sur Google Maps pour fournir leurs services - et c'est grace à l'API Google Maps qu'ils sont en mesure de le faire.
Les plats clés
- gmaps.js est une bibliothèque JavaScript open source qui simplifie l'API JavaScript Google Maps, ce qui permet aux développeurs de créer plus facilement des applications personnalisées avec des cartes.
- gmaps.js propose divers composants pour personnaliser les cartes, y compris les marqueurs, les polygones, les superpositions, la géolocalisation, la géocodage et les événements. Il permet également la création de cartes statiques qui peuvent être intégrées dans les sites Web.
- La bibliothèque fournit des méthodes pour ajouter et supprimer des marqueurs, dessiner des polylines et des polygones, créer des formes circulaires et ajouter des superpositions avec une teneur en HTML.
- Géocodage, le processus de calcul des coordonnées géographiques à partir d'une adresse de localisation donnée, peut être réalisée en utilisant la méthode GeoCode () dans gmaps.js. De même, la méthode Geolocate () peut être utilisée pour calculer la position géographique actuelle de l'utilisateur.
- gmaps.js prend également en charge les événements, permettant aux développeurs d'appeler des fonctions sur la survenue d'événements spécifiques sur la carte, comme un double clic ou un souris.
L'API Google Maps et GMAPS
Google a introduit l'API Google Maps en 2005. Cela a permis aux développeurs de créer des applications personnalisées avec des cartes. Google a ensuite lancé des API pour le développement d'applications Android et iOS.
Aussi utiles que les API MAPS, ils prennent un peu de savoir-faire à utiliser. C’est là que GMAPS.js entre en jeu. GMAPS.js est une bibliothèque JavaScript Mit-licence open-source. écrit par Gustavo Leon, GMAPS vise à simplifier l'API d'origine Google Maps JavaScript. Il s'occupe du code API étendu et fournit des méthodes appropriées pour traiter les cartes. Il est plus propre, plus concis et donc plus facile à utiliser.
Dans cet article, nous examinerons les composants de la carte comme les marqueurs, les polygones et les superpositions. Nous discuterons également des cartes statiques et de l'utilisation de la géolocalisation et de la géocodage pour fonctionner sur l'emplacement d'un utilisateur. Tout cela sera en référence aux GMAP. Il vous aide à créer des applications de carte avec des méthodes faciles à utiliser. Je l'ai utilisé pour créer un exemple d'application (Mapit), dont je vais discuter plus loin à la fin de l'article.
L'API Google et les GMAP ont comparé
L'exemple ci-dessous provient de la page de documentation d'origine. Le code (JavaScript uniquement) charge une carte avec son centre à Latitude -34.397 et Longitude 150.644, avec un niveau de zoom de 8:
<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
La carte est l'ID d'élément HTML où la carte se chargera.
Nous pouvons écrire la même application de base avec des GMAP comme ceci:
<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
Ce tutoriel vous guidera à travers certains des composants les plus utilisés dans les cartes, avec des exemple de stylos pour démontrer chacun.
Pour commencer
Créez une page HTML de base et ajoutez une référence à l'API MAPS. Vous devez également inclure la bibliothèque GMAPS. Alors allez à GMAPS et téléchargez gmaps.js. Incluez-le dans votre page Web et vous êtes prêt à partir.
<span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>
Il s'agit d'une page rudimentaire que je ferai référence dans les extraits d'exemples ci-dessous. L'objet MAP sera modifié dans certains de ces exemples.
Composants
L'API MAPS propose divers composants pour personnaliser les cartes. Les mêmes composants peuvent être ajoutés avec des GMAP avec moins de code.
événements
Un changement dans le DOM HTML (modèle d'objet de document) peut être décrit comme un événement. Vous pouvez appeler une fonction sur l'occurrence d'événements spécifiques sur la carte (comme un double clic ou une souris). L'extrait suivant définit les fonctions pour les événements de clic et de zoom_changed:
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>#map</span> {
</span></span></span><span><span> <span>width: 400px;
</span></span></span><span><span> <span>height: 400px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
<span><!-- Google Maps JS API -->
</span> <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span> <span><!-- GMaps Library -->
</span> <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>/* Map Object */
</span></span></span><span><span> <span>var mapObj = new GMaps({
</span></span></span><span><span> <span>el: '#map',
</span></span></span><span><span> <span>lat: 48.857,
</span></span></span><span><span> <span>lng: 2.295
</span></span></span><span><span> <span>});
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
Vous pouvez ajouter d'autres événements si vous le souhaitez. Une liste de tous les événements MAP est fournie dans la section Events dans la documentation. Certains des utiles sont:
Exemple de stylo
marqueurs
Un marqueur est un localisateur sur une carte. Il est généralement montré comme un ballon suspendu au-dessus de l'emplacement marqué. GMAPS propose la méthode addmarker () pour ajouter un marqueur. Il accepte un objet littéral avec les propriétés suivantes pour le marqueur:
- lat: latitude
- lng: longitude
- Titre: Titre affiché sur Mouseover
- Ic?ne: image personnalisée pour le marqueur
- Détails: objet personnalisé avec des données supplémentaires
- Infowindow: Informations sur le marqueur
Parmi ceux-ci, il est obligatoire d'attribuer des valeurs à Lat et GNL, tandis que les autres sont facultatifs. La valeur de l'infowindow devrait être un autre objet. Cet objet lui-même a les propriétés suivantes:
- Contenu: contenu HTML
- MaxWidth: largeur maximale pour la fenêtre. Si ce n'est pas réglé, la fenêtre s'étend sur la longueur du texte à l'intérieur.
Infowindow prend en charge d'autres options.
Cet extrait est un exemple valide de addmarker ():
<span>var mapObj = new GMaps({
</span> <span>el: '#map',
</span> <span>lat: 48.857,
</span> <span>lng: 2.295,
</span> <span>click: function(e) {
</span> <span>alert('You clicked on the map');
</span> <span>},
</span> <span>zoom_changed: function(e) {
</span> <span>alert('You zoomed the map');
</span> <span>}
</span><span>});</span>
addmarker () accepte également les événements - par exemple, un marqueur réagissant à l'événement Mouseover:
<span>var m = mapObj.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>title: 'Eiffel Tower',
</span> <span>infoWindow: {
</span> <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span> <span>maxWidth: 100
</span> <span>}
</span><span>});</span>
Exemple de stylo
Un marqueur peut être supprimé à l'aide de la méthode Removemarker (). Passez l'objet marqueur (m dans notre cas) comme argument:
mapObj<span>.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>mouseover: function(e) {
</span> <span>alert('Triggered');
</span> <span>}
</span><span>});</span>
Removemarkers () supprime collectivement tous les marqueurs associés à l'objet MAP.
<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
Géocoding
Pour localiser n'importe quel point sur une carte, vous devez avoir ses coordonnées géographiques ( latitude et longitude ). Le géocodage est de calculer ces coordonnées géographiques à partir d'une adresse de localisation donnée. La méthode geocode () nous permet de faire de même. Il prend l'adresse de localisation en tant que coordonnées d'entrée et de processus pour cette adresse.
- Adresse: cha?ne d'adresse de localisation
- Rappel: fonction appelée après géocoding
Calcularons la latitude et la longitude pour Stonehenge
, située au Royaume-Uni
. L'extrait ci-dessous calculera les coordonnées géographiques de l'adresse donnée et centrera la carte à cet endroit. Si aucun résultat n'est trouvé, un message est affiché:
<span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>
La méthode setCenter () prend la latitude et la longitude comme paramètres et centre la carte à cet emplacement géographique. Il accepte également un paramètre de rappel facultatif, une fonction déclenchée une fois la carte centrée.
Il y a deux paramètres dans la fonction de rappel: résultats et statut.
Les résultats sont un tableau d'objets, stockant les emplacements de tous les endroits avec l'adresse définie. Puisqu'il peut y avoir plus d'un endroit avec le même nom, il peut y avoir plus d'un résultat. Les résultats stocke chacun d'eux. L'emplacement du résultat i th peut être déterminé en utilisant les résultats [i] .geometry.location.
Si aucun résultat n'a été trouvé pour une adresse, les magasins d'état zero_results
, else ok
.
Exemple de stylo
Géolocation
Geolocation calcule la position géographique actuelle de l'utilisateur. La méthode GeoLocate () nous permet d'exploiter cette fonctionnalité. Il accepte un objet littéral avec quatre propriétés, dont toujours facultatif et les autres sont tous requis. Chaque propriété est définie comme une fonction exécutée dans des cas spécifiques:
- Succès: la géolocalisation a réussi
- Erreur: la géolocalisation n'a pas réussi
- not_supported: le navigateur ne prend pas en charge la géolocalisation
- Toujours: exécuté dans tous les cas
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>#map</span> {
</span></span></span><span><span> <span>width: 400px;
</span></span></span><span><span> <span>height: 400px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
<span><!-- Google Maps JS API -->
</span> <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span> <span><!-- GMaps Library -->
</span> <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>/* Map Object */
</span></span></span><span><span> <span>var mapObj = new GMaps({
</span></span></span><span><span> <span>el: '#map',
</span></span></span><span><span> <span>lat: 48.857,
</span></span></span><span><span> <span>lng: 2.295
</span></span></span><span><span> <span>});
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
Exemple de stylo
Polylines
Les polylines aident à retracer un chemin sur une carte. Un chemin peut être formé en rejoignant les coordonnées de différents points. La méthode DrawPolyline () dessine une polyligne pour un chemin. Ce chemin est fourni comme un tableau de coordonnées ( latitude et longitude ). Outre le chemin, vous pouvez spécifier d'autres propriétés pour une polyligne. Certains d'entre eux sont:
- AVCOWEMPLE
- StrokeColor
- RAVOPACITY
Les trois définissent le style de la polyligne. Il y en a aussi d'autres, bien que nous ne les couvrirons pas dans cet article.
<span>var mapObj = new GMaps({
</span> <span>el: '#map',
</span> <span>lat: 48.857,
</span> <span>lng: 2.295,
</span> <span>click: function(e) {
</span> <span>alert('You clicked on the map');
</span> <span>},
</span> <span>zoom_changed: function(e) {
</span> <span>alert('You zoomed the map');
</span> <span>}
</span><span>});</span>
Exemple de stylo
Une polyligne peut être supprimée à l'aide de la méthode retiraipolyline (). Il prend l'objet polyligne comme son paramètre. Retirez le polyine PL en utilisant:
<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
retirepolylines () supprime tous les polylines associées à un objet MAP.
<span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>
polygones
DrawPolygon () vous aide à créer un polygone sur une carte. à peu près comme la méthode DrawPolyline (), vous devez définir une propriété PATHS. Les propriétés de style de course (poids trait, strokecolor et rabougat) de polygone également. Ils définissent la bordure du polygone. En plus de cela, vous pouvez spécifier la couleur de remplissage et l'opacité du polygone:
- FillColor
- Fillopacity
D'autres options de polygone peuvent être trouvées dans la documentation.
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>#map</span> {
</span></span></span><span><span> <span>width: 400px;
</span></span></span><span><span> <span>height: 400px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
<span><!-- Google Maps JS API -->
</span> <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span> <span><!-- GMaps Library -->
</span> <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>/* Map Object */
</span></span></span><span><span> <span>var mapObj = new GMaps({
</span></span></span><span><span> <span>el: '#map',
</span></span></span><span><span> <span>lat: 48.857,
</span></span></span><span><span> <span>lng: 2.295
</span></span></span><span><span> <span>});
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
Rappelez-vous: c'est la propriété Path pour DrawPolyline () et Paths Property pour DrawPolygon ().
Exemple de stylo
Pour éliminer le polygone PG, utilisez:
<span>var mapObj = new GMaps({
</span> <span>el: '#map',
</span> <span>lat: 48.857,
</span> <span>lng: 2.295,
</span> <span>click: function(e) {
</span> <span>alert('You clicked on the map');
</span> <span>},
</span> <span>zoom_changed: function(e) {
</span> <span>alert('You zoomed the map');
</span> <span>}
</span><span>});</span>
Retirez tous les polygones définis dans MapOBJ:
<span>var m = mapObj.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>title: 'Eiffel Tower',
</span> <span>infoWindow: {
</span> <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span> <span>maxWidth: 100
</span> <span>}
</span><span>});</span>
cercles
La création de formes circulaires avec DrawPolygon () n'est pas viable. DrawCircle () vous aide avec cela. Sa liste de paramètres comprend:
- lat: latitude pour le centre
- LNG: longitude pour le centre
- Rayon: rayon en mètres à la surface de la Terre.
Les autres options incluent des styles de trait et de remplissage de forme (identiques que le polygone), et quelques autres.
mapObj<span>.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>mouseover: function(e) {
</span> <span>alert('Triggered');
</span> <span>}
</span><span>});</span>
Exemple de stylo
superpositions
Une superposition est une couche sur la carte avec le contenu HTML dessus. GMAPS prend en charge les superpositions avec la méthode de diroverlay (). Il accepte le hachage suivant:
- lat: latitude
- lng: longitude
- Contenu: contenu HTML
- verticalalign: haut, milieu, inférieur
- horizontalgin: gauche, milieu, droit
- VerticalOffset
- horizontaloffset
Les alignements et les décalages sont par rapport au point défini par LAT et LNG.
Exemple d'extrait:
mapObj<span>.removeMarker(m);</span>
Vous pouvez définir les styles CSS pour le contenu. Dans notre exemple, nous avons défini la classe de superposition.
mapObj<span>.removeMarkers();</span>
Exemple de stylo
supprimer la superposition? Eh bien, vous le savez:
<span>GMaps.geocode({
</span> <span>address: 'Stonehenge, United Kingdom',
</span> <span>callback: function(results<span>, status</span>) {
</span> <span>if (status == 'OK') {
</span> latlng <span>= results[0].geometry.location;
</span> mapObj<span>.setCenter(latlng.lat(), latlng.lng());
</span> <span>} else if (status == 'ZERO_RESULTS') {
</span> <span>alert('Sorry, no results found');
</span> <span>}
</span> <span>}
</span><span>});</span>
Supprimer toutes les superpositions pour un objet MAP? Vous le savez aussi:
<span>GMaps.geolocate({
</span> <span>success: function(position) {
</span> mapObj<span>.setCenter(position.coords.latitude, position.coords.longitude);
</span> <span>},
</span> <span>error: function(error) {
</span> <span>alert('Geolocation failed: ' + error.message);
</span> <span>},
</span> <span>not_supported: function() {
</span> <span>alert("Your browser does not support geolocation");
</span> <span>},
</span> <span>always: function() {
</span> <span>alert("Always");
</span> <span>}
</span><span>});</span>
cartes statiques
Une carte statique est une image de la carte, qui peut être intégrée indépendamment dans des sites Web. GMAPS vous permet de générer une URL vers une carte statique. Cette URL peut ensuite être ajoutée comme source à une image.
staticmapurl () génère l'URL de carte requise après avoir pris les paramètres suivants:
- Taille: un tableau de largeur et de hauteur en pixels
- lat
- lng
- zoom
Code Snippet:
<span>var path = [
</span> <span>[-12.044012922866312, -77.02470665341184],
</span> <span>[-12.05449279282314, -77.03024273281858],
</span> <span>[-12.055122327623378, -77.03039293652341],
</span> <span>[-12.075917129727586, -77.02764635449216],
</span> <span>[-12.07635776902266, -77.02792530422971],
</span> <span>[-12.076819390363665, -77.02893381481931],
</span> <span>[-12.088527520066453, -77.0241058385925]
</span><span>];
</span>
<span>var pl = mapObj.drawPolyline({
</span> <span>path: path,
</span> <span>strokeColor: '#76ff03',
</span> <span>strokeOpacity: 1,
</span> <span>strokeWeight: 10
</span><span>});</span>
Exemple de stylo
Dans notre exemple, nous avons créé un élément IMG et ajouté l'URL à son src:
mapObj<span>.removePolyline(pl);</span>
Nous pouvons également appliquer des marqueurs et des polylines sur des cartes statiques.
Exemple de stylo
Exemple d'application (Mapit)
Mapit (View Source sur GitHub) crée une carte statique pour une route entre la source et la destination. Zoomez vers une adresse sur la carte et placez deux marqueurs (une source et une destination). Mapit retracera un itinéraire d'un marqueur à un autre. Il créera une URL sur la carte statique avec la configuration actuelle. Vous pouvez prévisualiser la carte statique et télécharger l'image.
Conclusion
Cet article couvre les composants de base des cartes. Je suis s?r que cela a servi de bon guide démarré sur les GMAP et les applications de carte interactives. Mais cela ne devrait pas s'arrêter ici. Il y a beaucoup plus que vous pouvez faire avec les gmapsjs.
Avez-vous déjà utilisé des GMAP? Si oui, quelle a été votre expérience. Si vous avez des commentaires ou des questions, veuillez vous joindre à la discussion ci-dessous.
Questions fréquemment posées (FAQ) sur Google Maps avec gmaps.js
Comment puis-je commencer avec gmaps.js?
Pour commencer avec gmaps.js, vous devez d'abord inclure l'API JavaScript Google Maps dans votre fichier HTML. Après cela, incluez la bibliothèque GMAPS.js. Vous pouvez le télécharger à partir du référentiel GitHub officiel ou utiliser un CDN. Une fois que vous avez inclus ces scripts, vous pouvez initialiser une nouvelle carte en créant un nouvel objet GMAPS et en passant dans l'ID de l'élément HTML où vous voulez que la carte soit affichée, ainsi que certaines options comme la latitude et la longitude du centre de la carte.
Quelles sont les principales caractéristiques de gmaps.js?
gmaps.js simplifie le processus de travail avec Google Maps. Il fournit une API simple et intuitive pour créer et manipuler des cartes. Les caractéristiques clés incluent la possibilité d'ajouter facilement des marqueurs, des polygones et des couches, de la géolocalisation, du géocodage, etc. Il prend également en charge les événements, vous permettant de répondre aux interactions utilisateur telles que des clics ou des gouttes.
Comment puis-je ajouter des marqueurs à une carte à l'aide de gmaps.js?
Ajout de marqueurs à une carte avec GMAPS GMAPS? .js est simple. Vous pouvez utiliser la méthode Addmarker sur votre objet GMAPS, en passant dans un objet avec la latitude et la longitude du marqueur. Vous pouvez également inclure d'autres options comme le titre, cliquer sur les événements, et plus encore.
Comment puis-je utiliser la géolocalisation avec gmaps.js?
gmaps.js fournit une méthode de GetGeolocation que vous pouvez utiliser pour Obtenez l'emplacement actuel de l'utilisateur. Cette méthode renvoie une promesse qui se résout avec la latitude et la longitude de l'utilisateur. Vous pouvez ensuite utiliser ces informations pour centrer la carte sur l'emplacement de l'utilisateur ou ajouter un marqueur à leur emplacement.
Comment puis-je utiliser le géocodage avec gmaps.js?
Géocodage est le processus de conversion Adresses dans les coordonnées géographiques, que vous pouvez utiliser pour placer des marqueurs ou positionner la carte. Gmaps.js fournit une méthode géocode qui prend une adresse et renvoie une promesse qui résout avec le résultat géocodé.
Comment puis-je ajouter des événements à une carte avec gmaps.js?
gmaps.js prend en charge une variété d'événements, y compris le clic, le glisser, zoom_changed, etc. Vous pouvez ajouter un écouteur d'événement à votre objet GMAPS à l'aide de la méthode AddListener, en passant le nom de l'événement et une fonction de rappel à exécuter lorsque l'événement se produit.
Comment puis-je ajouter des couches à une carte avec gmaps.js ?
gmaps.js prend en charge l'ajout de différents types de couches à une carte, y compris le trafic, le transport en commun et les couches de vélo. Vous pouvez ajouter un calque à l'aide de la méthode addlayer sur votre objet GMAPS, en passant le nom du calque.
Comment puis-je dessiner des formes sur une carte avec gmaps.js?
gmaps.js Fournit des méthodes pour dessiner différentes formes sur une carte, y compris les lignes, les polygones, les cercles et les rectangles. Vous pouvez utiliser les méthodes de diroverlay, drawpolygon, drawriccle et drawrectangle sur votre objet gmaps.
Comment puis-je personnaliser l'apparence d'une carte avec gmaps.js?
gmaps.js vous permet de Personnalisez l'apparence d'une carte à l'aide de styles. Vous pouvez passer dans une option Styles lors de la création de votre objet GMAPS, qui devrait être un tableau d'objets de style qui décrivent comment différents éléments de la carte doivent être stylisés.
Comment puis-je gérer les erreurs avec gmaps.js?
gmaps.js fournit un moyen de gérer les erreurs qui se produisent lors de l'utilisation de la bibliothèque. Vous pouvez écouter l'événement ?Erreur? sur votre objet GMAPS, qui sera déclenché chaque fois qu'une erreur se produit. L'objet de l'événement contiendra des informations sur l'erreur, y compris un message et une trace de pile.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Le raccourci du développeur sur votre plate-forme de type Udemy
Jun 17, 2025 pm 04:43 PM
Lors du développement de plateformes d'apprentissage similaires à Udemy, l'accent n'est pas seulement mis sur la qualité du contenu. Tout aussi important est la fa?on dont ce contenu est livré. En effet, les plateformes éducatives modernes reposent sur des médias accessibles, rapides et faciles à digérer.
Plates-formes de revendeur rentables pour acheter des certificats SSL
Jun 25, 2025 am 08:28 AM
Dans un monde où la confiance en ligne n'est pas négociable, les certificats SSL sont devenus essentiels pour chaque site Web. La taille du marché de la certification SSL était évaluée à 5,6 milliards USD en 2024 et se développe toujours fortement, alimentée par la montée en puissance du commerce électronique
5 meilleures passerelles de paiement pour SaaS: Votre guide ultime
Jun 29, 2025 am 08:28 AM
Une passerelle de paiement est un élément crucial du processus de paiement, permettant aux entreprises d'accepter les paiements en ligne. Il agit comme un pont entre le client et le marchand, transférant en toute sécurité les informations de paiement et facilitant les transactions. Pour
Les ouragans et les tempêtes de sable peuvent être prévues 5 000 fois plus rapidement grace au nouveau modèle Microsoft AI
Jul 05, 2025 am 12:44 AM
Un nouveau modèle d'intelligence artificielle (IA) a démontré la capacité de prédire les principaux événements météorologiques plus rapidement et avec une plus grande précision que plusieurs des systèmes de prévision mondiaux les plus utilisés. Ce modèle, nommé Aurora, a été formé u
Une nouvelle étude prétend que l'IA ?comprend? l'émotion mieux que nous & mdash; Surtout dans des situations chargées émotionnelles
Jul 03, 2025 pm 05:48 PM
Dans ce qui semble encore un autre revers pour un domaine où nous pensions que les humains dépasseraient toujours les machines, les chercheurs proposent maintenant que l'IA comprend mieux les émotions que nous.
Vos appareils nourrissent les assistants IA et récoltent des données personnelles même si elles sont endormies. Voici comment savoir ce que vous partagez.
Jul 05, 2025 am 01:12 AM
Qu'on le veuille ou non, l'intelligence artificielle fait partie de la vie quotidienne. De nombreux appareils - y compris les rasoirs électriques et les brosses à dents - sont devenus alimentés par l'IA, "en utilisant des algorithmes d'apprentissage automatique pour suivre comment une personne utilise l'appareil, comment le Devi
Externaliser tout à l'IA nous co?terait notre capacité à penser par nous-mêmes?
Jul 03, 2025 pm 05:47 PM
L'intelligence artificielle (IA) a commencé comme une quête pour simuler le cerveau humain, est-ce maintenant en train de transformer le r?le du cerveau humain dans la vie quotidienne? La révolution industrielle a réduit la dépendance à l'égard du travail manuel. En tant que personne qui fait des recherches sur l'application
Les modèles AI avancés génèrent jusqu'à 50 fois plus de CO & # 8322; émissions que les LLM plus communes lorsqu'ils répondent aux mêmes questions
Jul 06, 2025 am 12:37 AM
Plus nous essayons de faire fonctionner les modèles d'IA, plus leurs émissions de carbone deviennent grandes - certaines invites générant jusqu'à 50 fois plus de dioxyde de carbone que d'autres, selon une étude récente.
