Erstellen animierter Google Map -Marker mit CSS und JavaScript

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:

Die folgenden Schritte führen Sie zum Hinzufügen von CSS -Animationsfunktionen zur Kartenmarke:

Schritt 1: Fügen Sie ein markiertes Bild hinzu

Geben Sie Ihr Bild mit dem folgenden Code an:

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

Dies ermöglicht es Ihnen, jeden Marker als unabhängiges DOM -Element zu rendern:

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

hinzufügen

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!