Lassen Sie Ihre Google Maps -Tags bewegen: Die wunderbaren Verwendungen von CSS -Animationen

Die Google Maps -API bietet Webentwicklern bequeme Tools, aber ihre Kartenmarkierungen fehlen Flexibilit?t und Kreativit?t. In diesem Artikel wird demonstriert, wie CSS und JavaScript kombiniert werden, um animierte Kartenmarkierungen zu erstellen, die auf Benutzerinteraktionen reagieren und Ihre Karte lebhafter und interessanter machen.

Kernpunkte:

• Die Google Maps-API ist leistungsstark, aber die integrierten Kartenmarkierungen fehlen die Flexibilit?t. Durch die clevere Kombination von CSS und JavaScript k?nnen wir Animationsmarker erstellen, die interaktiver und visuell ansprechender sind.
• Zu den wichtigsten Schritten zum Implementieren von Animations -Tags geh?ren: Hinzufügen eines Tag -Images, das Einstellen optimized: false, um jedes Tag als unabh?ngiges DOM -Element zu rendern, OverlayView zu organisieren und schlie?lich CSS zur Animation zu verwenden.
• Um marke Animationen besser zu steuern, k?nnen wir externe Umschaltungen hinzufügen, Animationen für Benutzerinteraktionen wie Klicks oder Schwebepl?tze hinzufügen und sogar verschiedene Animationseffekte auf verschiedene Arten von Noten anwenden, um die Benutzererfahrung zu verbessern.

Die Google Maps-API erstellt eine hervorragende Benutzererfahrung mit nur wenigen Codezeilen mit ihren leistungsstarken integrierten Funktionen. Es hat jedoch einen klaren Mangel bei der Anpassung von Kartenmarkierungen: mangelnde Flexibilit?t und Kreativit?t.

W?hrend Sie benutzerdefinierte Markerbilder, Tooltips und Tags hinzufügen k?nnen, sind dies statische, textuelle Interaktionen, die überfüllt erscheinen, wenn viele Markierungspunkte auf der Karte vorhanden sind. Derzeit gibt es keine Standardmethode, um interaktive Tags zu erstellen, die auf Benutzeraktionen reagieren.

Um dieses Problem zu l?sen, habe ich einen Weg erforscht, wirklich einzigartige Karten zu erstellen, d. H. CSS3 -Animationen zu Ihren Kartenmarken hinzuzufügen und sie springen zu lassen, zu drehen oder zu verbergen, um die Grafik zu verbessern.

Wenn der Benutzer über die Marke hob, klicken Sie auf die Marke oder verwenden Sie die Schaltfl?che Umschaltungen au?erhalb der Karte, k?nnen Sie jede CSS -Animation verwenden, um die Marke zu verschieben. Dieser Leitfaden konzentriert sich auf eine einfache Strategie, die Sie für jedes Projekt anwenden k?nnen. (Die beiden Beispiele von Ryan Connolly und Felipe Figueroa verwenden einen ?hnlichen Ansatz.)

Folgendes ist ein einfaches Beispiel für einen Animationsmarker. Die berühmte Cheshire -Katze ist ein Marker für drei verschiedene Orte in Massachusetts. Sie k?nnen ihre Animation mit der Schalttaste in der oberen rechten Ecke ?ndern:

codePen Sample -Link

Grundlegende Schritte:

Schritt 1: Fügen Sie ein markiertes Bild hinzu

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)
};

Schritt 2: Setzen Sie optimized: false

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)
};

Schritt 3: Erstellen Sie OverlayView

Dies organisiert alle Marker in einem Panel, damit Sie auf sie aus dem DOM zugreifen k?nnen:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: catIcon,
    optimized: false
});

In der Zeile getPanes() k?nnen Sie der Tagschicht eine ID zuweisen, um sie in CSS zu verwenden. In diesem OverlayView sammelt automatisch Markierungen, die sich nicht in anderen Ebenen befinden. In diesem Fall gibt es keine anderen Schichten, sodass es alle Marker sammelt.

Schritt 4: Animation mit CSS

Dies kann eine einmalige Animation oder eine kontinuierliche Animation sein:

var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
    this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);

Flexible Optionen:

Die obigen Schritte beleben sofort alle Marker. Hier sind einige bessere M?glichkeiten, Animations Markup zu kontrollieren:

• externer Switch: Verwenden des JQuery .click() -Anhandler k?nnen Sie das Display und das Ausblenden von Animationen problemlos steuern oder die Animationseffekte verschiedener Tags ?ndern.

• click/Hoover: , indem Sie ein globales Array erstellen, um alle Tags zu speichern und jedem Tag ein eindeutiges title Attribut hinzuzufügen, k?nnen Sie die Klick- und Schwebereignisse animieren.

• Verschiedene Animationen verschiedener Markertypen: Verwenden Sie den CSS -Selektor, um verschiedene Animationen auf verschiedene Arten von Markierungen entsprechend dem Attribut src des Markierungsbildes anzuwenden.

Zusammenfassung:

Als Entwickler oder Designer ist Ihr Hauptziel, Produkte zu erstellen, die Benutzer m?gen. Benutzer wurden vielen Google Maps -Produkten ausgesetzt, und es ist Zeit, Ihre Karte hervorzuheben!

Sie k?nnen die Kartenmarkierungsanimation verwenden, um die Benutzererfahrung durch die folgenden Methoden zu verbessern:

• für Markerbilder ?hnlich wie reale bewegende Objekte (wie Katzen) k?nnen sie mit CSS -Animationen hinzugefügt werden, die natürlicher Bewegung entsprechen.
• für Markerbilder (wie Stores), die keine traditionelle Mobilit?t haben, eine Animation, die es scheint, auf Benutzerklicks wie Sprünge oder Jitter zu reagieren.
• Wenn Ihre Daten jedem Tag entsprechen, k?nnen Sie das Tag reagieren, basierend auf den Daten. Zum Beispiel kann über eine gesch?ftige Kreuzung ein blinkendes Ausrufezeichen hinzugefügt werden.

Versuchen Sie es und warten Sie, bis die Benutzer Ihre Arbeit loben!

FAQs:

(Der im Originaltext angegebene FAQ-Inhalt sollte hier hinzugefügt werden, und entsprechende Pseudo-Original-Umschreibungen sollten durchgeführt werden, um die Konsistenz des Inhalts aufrechtzuerhalten und Duplizierung zu vermeiden.)

Das obige ist der detaillierte Inhalt vonErstellen animierter Google Map -Marker mit CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!