Wie erstelle ich benutzerdefinierte Infofenster mit quadratischen Ecken in Google Maps?

Benutzerdefinierte Infofenster in Google Maps erstellen

Das Standard-Infofenster von Google Maps, das angezeigt wird, wenn auf eine Kartenmarkierung geklickt wird, weist häufig abgerundete Ecken auf. Möglicherweise wünschen Sie sich jedoch ein individuelleres InfoWindow mit quadratischen Ecken. Dieser Artikel bietet Anleitungen zum Erreichen dieser Anpassung.

Verwendung von JavaScript-Bibliotheken

Externe JavaScript-Bibliotheken bieten robuste Lösungen zum Erstellen benutzerdefinierter InfoWindows. Eine beliebte Option ist die Google Maps Info Bubble-Bibliothek. Sie können damit das Erscheinungsbild, die Form und den Inhalt von InfoWindows an Ihre spezifischen Anforderungen anpassen.

Beispielimplementierung

Der folgende Codeausschnitt zeigt, wie eine benutzerdefinierte Implementierung implementiert wird InfoWindow mit der Info Bubble-Bibliothek:

<code class="js">const infoBubble = new google.maps.InfoWindowBubble({
  maxWidth: 300, // Maximum width of the InfoWindow
  maxHeight: 200, // Maximum height of the InfoWindow
  arrowPosition: 50, // Offset of the arrow from the center of the InfoWindow
  padding: 10, // Padding around the content of the InfoWindow
  borderWidth: 1, // Border width around the InfoWindow
  borderColor: "#000000", // Border color of the InfoWindow
  backgroundColor: "#FFFFFF", // Background color of the InfoWindow
  hideCloseButton: true, // Hide the close button on the InfoWindow
  borderRadius: 0, // Set the border radius to 0 for square corners
});

// Attach the custom InfoWindow to a map marker
const marker = new google.maps.Marker({
  position: {
    lat: 0,
    lng: 0,
  },
  map,
});
marker.addListener("click", () => {
  infoBubble.setContent("This is a custom InfoWindow.");
  infoBubble.open(map, marker);
});</code>

In diesem Beispiel wird ein InfoWindow mit quadratischen Ecken und einer maximalen Größe von erstellt 300 Pixel breit und 200 Pixel hoch. Es hat einen schwarzen Rand, einen weißen Hintergrund und keine sichtbare Schaltfläche zum Schließen.

Alternativen

Wenn die Info Bubble-Bibliothek Ihren Anforderungen nicht entspricht, sollten Sie andere Optionen in Betracht ziehen, z B. die MarkerClusterer-Bibliothek oder die DataLayer-Bibliothek. Beide bieten flexible Lösungen zum Anpassen von InfoWindows und zum Verbessern Ihres Google Maps-Erlebnisses.

Das obige ist der detaillierte Inhalt vonWie erstelle ich benutzerdefinierte Infofenster mit quadratischen Ecken in Google Maps?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!