Entfernen Sie Gitterlinien in Google Maps, die durch Zoom verursacht wurden
Wie entferne ich die weiße Gitterlinie von Google Map? Ich habe Zoom hinzugefügt: 0.7 CSS-Eigenschaft zu mappen div und aus meiner Forschung, fügen diese Eigenschaften die weißen Linien.
Ist es möglich, eine weiße Linie aus Google Map zu entfernen, ohne die Zoom-Eigenschaft zu entfernen? Ich brauche die Karte genau so, wie sie gerade ist. Oder haben wir eine Alternative zum Zoomen?
Hier ist der Code:
So sieht es aus:
5 Antworten
Dies liegt daran, dass Sie die Karte skalieren. Versuchen Sie, einen Transformations-Stil hinzuzufügen: preserve-3d; und dann das Element auf der Z-Achse skalieren.
Wenn Sie dies tun:
%Vor%Sie skalieren UP , um das Problem zu umgehen. Seltsame Dinge passieren, wenn Sie Objekte skalieren, die andere skalierte Objekte enthalten DOWN .
Das translateZ (-30vw) sagt, 30% der Breite des Darstellungsfeldes. Ich habe ein paar Bier getrunken, aber ich denke, das könnte dasselbe sein wie der Zoom 0,7, der sich aus der Artikelbreite (100% Breite des Darstellungsbereichs) ergibt.
Dann spielen Sie einfach mit der Skala, bis Sie auf der synthetischen Zoomstufe sind, nach der Sie gesucht haben.
Hinweis: Ändern Sie (500px) in (automatisch)
Ändern Sie diesen Stil - für Vollbild mit zentrierter Karte.
CSS
%Vor%DEMO
In der Hoffnung, etwas Zeit zu sparen, glaube ich nicht, dass das, was Sie erreichen wollen, über CSS-Transformations-Hacks oder zoom (no-no) möglich ist.
Sie kämpfen frontal mit plattformspezifischem Hardware-Rendering, Googles Karten-Rendering-Engine, Browser-Implementierungsvielfalt, und alles, was Sie für sich haben, ist eine Handvoll CSS-Regeln, um diese drei Giganten zu umgehen.
Kurz und zum Beispiel : selbst wenn Sie es in Chrome auf dem Mac zum Laufen gebracht haben, zeigt Firefox unter Windows möglicherweise noch Grenzen oder andere Artefakte an.
Konstruktiv möchten Sie vielleicht Leaflet.js ausprobieren, das Ihnen viel mehr Möglichkeiten und Kontrolle bietet Über Ihrer Karte können Sie Kacheln verwenden, die nicht-ganzzahlige Zoomstufen unterstützen.
Der beste Weg, um Leerzeilen zu vermeiden, ist das Erzwingen eines ganzzahligen Wertes im aggregierten Zoom. Der zoom :5 vom Kartenaufruf kann zoom: 4 sein, um den Effekt von zoom: 0.7 im CSS nachzuahmen.
Wenn Sie diese Zahl durch eine Berechnung erhalten, stellen Sie sicher, dass Sie diese Zahl in Math.round einfügen.
Tatsächlich ist zoom: 4 nicht das exakt gleiche Aussehen der Karte, aber Sie können keine Float-Felder in dieser Eigenschaft verwenden. Wenn Sie die leeren Zeilen entfernen möchten, ist es besser, den Kartenzoom direkt über die zoom -Eigenschaft von google map zu erhalten, da css zoom eine veraltete, alte IE-Eigenschaft ist, die vermieden werden sollte.
Auch der Mittelpunkt der Karte befindet sich jetzt in der Mitte der Kartenansicht.
Tags und Links javascript css google-maps