Création des marqueurs de carte Google animés avec CSS et JavaScript

Laissez vos balises Google Maps bouger: les merveilleuses utilisations des animations CSS

L'API Google Maps fournit des outils pratiques pour les développeurs Web, mais ses marques de carte manquent de flexibilité et de créativité. Cet article montrera comment combiner CSS et JavaScript pour créer des marqueurs de carte animés qui répondent aux interactions des utilisateurs, ce qui rend votre carte plus vive et intéressante.

Points de base:

• L'API Google Maps est puissante, mais les marqueurs de carte intégrés manquent de flexibilité. Grâce à la combinaison intelligente de CSS et JavaScript, nous pouvons créer des marqueurs d'animation plus interactifs et visuellement attrayants.
• Les étapes clés pour implémenter les balises d'animation incluent: l'ajout d'une image de balise, le définition optimized: false pour rendre chaque balise en tant qu'élément DOM indépendant, créant OverlayView pour organiser toutes les balises, et enfin l'utilisation de CSS à l'animation.
• Afin de mieux contrôler les animations de marque, nous pouvons ajouter des bascules externes, ajouter des animations pour les interactions utilisateur telles que les clics ou le survol, et même appliquer des effets d'animation différents à différents types de marques pour améliorer l'expérience utilisateur.

L'API Google Maps crée une excellente expérience utilisateur avec seulement quelques lignes de code avec ses puissantes fonctions intégrées. Cependant, il a une lacune claire dans la personnalisation des marqueurs de carte: manque de flexibilité et de créativité.

Bien que vous puissiez ajouter des images de marqueurs personnalisées, des info-bulleurs et des balises, ce sont des interactions textuelles statiques qui semblent encombrées lorsqu'il existe de nombreux points de marquage sur la carte. Il n'y a actuellement aucun moyen standard de créer des balises interactives qui répondent aux actions de l'utilisateur.

Pour résoudre ce problème, j'ai exploré un moyen de créer des cartes vraiment uniques, c'est-à-dire ajouter des animations CSS3 à vos marques de carte et de les laisser sauter, tourner ou se cacher pour améliorer les visuels.

Lorsque l'utilisateur oscille sur la marque, cliquez sur la marque ou utilisez le bouton basculer à l'extérieur de la carte, vous pouvez utiliser n'importe quelle animation CSS pour faire bouger la marque. Ce guide se concentrera sur une stratégie simple que vous pouvez appliquer à n'importe quel projet. (Les deux exemples de Ryan Connolly et Felipe Figueroa utilisent une approche similaire.)

Ce qui suit est un exemple simple de marqueur d'animation. Le célèbre chat Cheshire est un marqueur pour trois endroits différents dans le Massachusetts, vous pouvez changer son animation en utilisant le bouton à bascule dans le coin supérieur droit:

Codepen Exemple de lien

étapes de base:

Les étapes suivantes vous guideront pour ajouter la fonction d'animation CSS à la marque de carte:

Étape 1: Ajoutez une image taguée

Spécifiez votre image avec le code suivant:

<code class="language-javascript">var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};</code>

Étape 2: Set optimized: false

Cela vous permet de rendre chaque marqueur en tant qu'élément DOM indépendant:

<code class="language-javascript">var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};</code>

Étape 3: Créer OverlayView

Cela organisera tous les marqueurs dans un panneau afin que vous puissiez y accéder à partir du dom:

<code class="language-javascript">var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: catIcon,
    optimized: false
});</code>

Dans la ligne getPanes(), vous pouvez affecter un ID à la couche de balise pour l'utiliser dans CSS. Ce OverlayView collectera automatiquement tous les marqueurs qui ne sont pas dans d'autres couches. Dans ce cas, il n'y a pas d'autres couches, il collecte donc tous les marqueurs.

Étape 4: Ajouter une animation à l'aide de CSS

Cela peut être une animation unique ou une animation continue:

<code class="language-javascript">var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
    this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);</code>

Options flexibles:

Les étapes ci-dessus animeront immédiatement tous les marqueurs. Voici quelques façons plus fines de contrôler le balisage de l'animation:

• Commutateur externe: En utilisant le gestionnaire jQuery .click(), vous pouvez facilement contrôler l'affichage et masquer les animations, ou modifier les effets d'animation de différentes balises.

• Cliquez sur / hoover: En créant un tableau global pour stocker toutes les balises et en ajoutant un attribut unique title à chaque balise, vous pouvez animer les événements de clic et de survol.

• Différentes animations de différents types de marqueurs: Utilisez le sélecteur CSS pour appliquer différentes animations à différents types de marqueurs en fonction de l'attribut src de l'image de marqueur.

Résumé:

En tant que développeur ou concepteur, votre objectif principal est de créer des produits que les utilisateurs aiment. Les utilisateurs ont été exposés à de nombreux produits Google Maps, et il est temps de faire ressortir votre carte!

Vous pouvez utiliser l'animation de marque de carte pour améliorer l'expérience utilisateur en utilisant les méthodes suivantes:

• Pour les images marqueurs similaires aux objets en mouvement réels (comme les chats), ils peuvent être ajoutés avec des animations CSS correspondant au mouvement naturel.
• pour les images de marqueur (comme les magasins) qui n'ont pas de mobilité traditionnelle, une animation qui le fait réagir aux clics des utilisateurs, tels que des sauts ou des nervures.
• Si vos données correspondent à chaque balise, vous pouvez réagir la balise en fonction des données. Par exemple, pour une intersection occupée, une marque d'exclamation clignotante peut être ajoutée au-dessus.

Essayez-le et attendez que les utilisateurs louent votre travail!

FAQS:

(Le contenu FAQ fourni dans le texte d'origine doit être ajouté ici, et des réécritures pseudo-originales correspondantes doivent être effectuées pour maintenir la cohérence du contenu et éviter la duplication.)

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!