1 00:00:00,780 --> 00:00:04,163 ‫-: Lassen Sie uns nun mit dem Aufbau unserer Kartenintegration fortfahren. 2 00:00:05,720 --> 00:00:08,637 ‫Kommen wir also nun zu Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫Und so verwende ich jetzt Mapbox anstelle von Google Maps und 4 00:00:15,090 --> 00:00:16,710 ‫das liegt daran, 5 00:00:16,710 --> 00:00:19,260 ‫dass Google Maps seit einiger Zeit tatsächlich 6 00:00:19,260 --> 00:00:21,300 ‫eine Kreditkarte von Ihnen verlangt, um 7 00:00:21,300 --> 00:00:23,220 ‫Google Maps nutzen zu können. 8 00:00:23,220 --> 00:00:26,640 ‫Und ich denke, das ist keine gute Idee für einen Kurs wie 9 00:00:26,640 --> 00:00:29,160 ‫diesen, und eigentlich mag ich Mapbox auch sehr, 10 00:00:29,160 --> 00:00:33,723 ‫und daher denke ich, dass es perfekt für uns ist, um es in diesem Kurs zu verwenden. 11 00:00:35,500 --> 00:00:37,720 ‫Sie haben auch eine ausgezeichnete 12 00:00:37,720 --> 00:00:40,130 ‫Dokumentation, die wir gleich hier ausprobieren werden. 13 00:00:40,130 --> 00:00:43,330 ‫Aber jetzt beginnen wir und erstellen ein neues Konto. 14 00:00:43,330 --> 00:00:45,623 ‫Also einfach hier klicken, um mit dem Bauen zu beginnen. 15 00:00:48,208 --> 00:00:51,960 ‫Und dann erstellen Sie natürlich Ihr kostenloses Konto. 16 00:00:51,960 --> 00:00:54,370 ‫Ich habe bereits einen und pausiere 17 00:00:54,370 --> 00:00:58,200 ‫das Video an dieser Stelle einfach, um dieses Konto zu erstellen. 18 00:00:58,200 --> 00:01:00,210 ‫Und nachdem Sie Ihr Konto erstellt haben, 19 00:01:00,210 --> 00:01:02,960 ‫sollten Sie auf einer Seite landen, die ungefähr so aussieht. 20 00:01:02,960 --> 00:01:05,009 ‫Jetzt, wenn Sie dieses Video 21 00:01:05,009 --> 00:01:06,820 ‫ansehen, könnte sich diese 22 00:01:06,820 --> 00:01:09,430 ‫Seite hier natürlich geändert haben, und 23 00:01:09,430 --> 00:01:11,020 ‫wahrscheinlich hat 24 00:01:11,020 --> 00:01:13,900 ‫sie sich geändert, aber jetzt müssen wir 25 00:01:13,900 --> 00:01:17,281 ‫einen Link finden, der so etwas sagt, also 26 00:01:17,281 --> 00:01:21,850 ‫installieren Sie die Karten-Softwareentwicklung kit, also diese hier, oder auch Mapbox 27 00:01:21,850 --> 00:01:24,455 ‫integrieren, was ziemlich ähnlich sein sollte. 28 00:01:24,455 --> 00:01:29,025 ‫Also klicke ich hier auf die Karten für JavaScript installieren. 29 00:01:29,025 --> 00:01:30,720 ‫Und was wir hier 30 00:01:30,720 --> 00:01:33,100 ‫tun werden, ist das Mapbox-CDN, also 31 00:01:33,100 --> 00:01:35,050 ‫das Content Delivery Network, 32 00:01:35,050 --> 00:01:36,500 ‫und vorerst 33 00:01:36,500 --> 00:01:38,503 ‫zumindest nicht den NPM-Modulbundler. 34 00:01:40,230 --> 00:01:43,500 ‫Der erste Schritt, wie es hier heißt, besteht 35 00:01:43,500 --> 00:01:47,941 ‫also darin, diese Dateien hier und in die had HTML-Datei aufzunehmen. 36 00:01:47,941 --> 00:01:51,121 ‫Und hier brauchen wir jetzt 37 00:01:51,121 --> 00:01:54,663 ‫die Extended Head-Technik, die wir vorher hatten. 38 00:01:56,970 --> 00:01:58,860 ‫Und da brauchen wir 39 00:01:58,860 --> 00:02:01,293 ‫jetzt eigentlich die Erweiterung der Kopftechnik. 40 00:02:02,443 --> 00:02:04,060 ‫Denken Sie hier in 41 00:02:04,060 --> 00:02:07,690 ‫der Tour daran, wie wir das eigentlich aus dem Kopf geschafft haben. 42 00:02:07,690 --> 00:02:10,550 ‫Aber jetzt brauchen wir noch ein paar Sachen, die 43 00:02:10,550 --> 00:02:12,940 ‫wir an den Kopf anhängen müssen. 44 00:02:12,940 --> 00:02:16,533 ‫Das ist also dieses Skript und auch dieses Stylesheet. 45 00:02:17,570 --> 00:02:19,833 ‫Lassen Sie uns das hier schnell in Mops übersetzen. 46 00:02:26,250 --> 00:02:28,533 ‫Und der Link auch, und das 47 00:02:31,470 --> 00:02:33,300 ‫war's dann auch schon. 48 00:02:33,300 --> 00:02:34,663 ‫Lassen Sie uns 49 00:02:35,930 --> 00:02:39,370 ‫diesen Teil loswerden und gehen wir hier zum nächsten Schritt zurück. 50 00:02:39,370 --> 00:02:43,720 ‫Als nächstes müssen wir diesen JavaScript-Code hier in 51 00:02:43,720 --> 00:02:45,885 ‫unsere Datei kopieren. 52 00:02:45,885 --> 00:02:48,050 ‫Und natürlich zu unserem Drehbuch. 53 00:02:48,050 --> 00:02:51,140 ‫Also gleich hier in Mapbox. js. 54 00:02:51,140 --> 00:02:53,860 ‫Jetzt werden Sie dieses Zugriffstoken wahrscheinlich zu diesem Zeitpunkt 55 00:02:53,860 --> 00:02:55,360 ‫noch nicht haben, und 56 00:02:55,360 --> 00:02:58,180 ‫daher war es entweder erforderlich, dass Sie es bereits tun, 57 00:02:58,180 --> 00:03:01,343 ‫oder ich werde Ihnen in einer Sekunde zeigen, wie es geht. 58 00:03:02,586 --> 00:03:05,230 ‫Lassen Sie uns diesen Teil hier einfach einrücken. 59 00:03:05,230 --> 00:03:09,510 ‫Damit sind wir eigentlich schon startklar. 60 00:03:09,510 --> 00:03:11,640 ‫Damit sollte eigentlich schon eine Karte 61 00:03:11,640 --> 00:03:14,090 ‫erstellt und auf unserer Seite angezeigt werden. 62 00:03:14,090 --> 00:03:17,760 ‫Das liegt daran, dass der Container hier auf map gesetzt ist. 63 00:03:17,760 --> 00:03:20,260 ‫Und das bedeutet, dass die Karte auf 64 00:03:20,260 --> 00:03:23,270 ‫ein Element mit der ID von Karte gelegt wird. 65 00:03:23,270 --> 00:03:26,410 ‫Deshalb haben wir hier in unserer Tour dieses 66 00:03:27,280 --> 00:03:29,010 ‫Element hier, oh, wo 67 00:03:29,010 --> 00:03:30,003 ‫ist das? 68 00:03:31,100 --> 00:03:34,760 ‫Hier haben wir also ein Element mit ID-Map. 69 00:03:34,760 --> 00:03:37,730 ‫Der Grund dafür ist, dass wir hier in Mapbox eigentlich 70 00:03:37,730 --> 00:03:39,390 ‫ein Element mit einer 71 00:03:39,390 --> 00:03:41,940 ‫ID brauchen, die wir dann hier angeben können. 72 00:03:41,940 --> 00:03:43,920 ‫Und die Vorgabe ist map, 73 00:03:43,920 --> 00:03:46,750 ‫und so habe ich es in html genannt. 74 00:03:46,750 --> 00:03:48,900 ‫Dann haben wir hier auch diesen Standardstil, 75 00:03:48,900 --> 00:03:50,700 ‫den wir gleich ändern werden. 76 00:03:52,070 --> 00:03:54,393 ‫Kehren wir vorerst zu unseren Anweisungen hier 77 00:03:56,530 --> 00:03:59,720 ‫zurück, und so heißt es, dass wir hier fertig sind. 78 00:03:59,720 --> 00:04:02,707 ‫Aber jetzt gehen wir tatsächlich zu 79 00:04:02,707 --> 00:04:06,185 ‫unserem Konto zurück und erstellen das Token, das wir 80 00:04:06,185 --> 00:04:09,650 ‫benötigen, um tatsächlich auf Mapbox zugreifen zu können. 81 00:04:09,650 --> 00:04:11,460 ‫Bitte kopieren Sie nicht einfach 82 00:04:11,460 --> 00:04:13,990 ‫mein Token, das wird für Sie nicht gut funktionieren. 83 00:04:13,990 --> 00:04:16,270 ‫Aber erstellen Sie stattdessen Ihre eigenen. 84 00:04:16,270 --> 00:04:19,363 ‫Sie können einfach einen neuen Namen dafür erstellen. 85 00:04:21,760 --> 00:04:23,713 ‫Nennen wir es einfach so. 86 00:04:26,010 --> 00:04:28,200 ‫Und dann hier Token erstellen. 87 00:04:28,200 --> 00:04:29,550 ‫Dann geben Sie 88 00:04:32,040 --> 00:04:35,640 ‫Ihr Passwort ein und können dann dieses Token verwenden. 89 00:04:35,640 --> 00:04:38,150 ‫Auch hier bin ich mir nicht sicher, ob dieses 90 00:04:38,150 --> 00:04:40,860 ‫Token bereits für Sie erstellt wurde oder ob Sie wirklich 91 00:04:40,860 --> 00:04:42,360 ‫ein neues erstellen mussten. 92 00:04:42,360 --> 00:04:46,500 ‫Wie auch immer, es ist auch schön, für jedes Projekt ein Token zu 93 00:04:46,500 --> 00:04:47,820 ‫haben, damit Sie 94 00:04:47,820 --> 00:04:50,668 ‫dieses Token dann nur auf dieses Projekt beschränken können. 95 00:04:50,668 --> 00:04:54,160 ‫Ich habe mein Konto hier vor langer Zeit erstellt und 96 00:04:54,160 --> 00:04:57,530 ‫bin mir daher wieder nicht ganz sicher, wie das 97 00:04:57,530 --> 00:05:01,073 ‫funktioniert hat, aber egal, mit diesem Token sollten Sie jetzt loslegen. 98 00:05:03,730 --> 00:05:07,883 ‫Tatsächlich sollte dies jetzt bereits unsere Standardkarte anzeigen. 99 00:05:09,250 --> 00:05:13,990 ‫Also lasst uns neu laden, und tatsächlich ist dies unsere Standardkarte. 100 00:05:13,990 --> 00:05:15,960 ‫Es sieht nicht wirklich schön aus, 101 00:05:15,960 --> 00:05:17,313 ‫gut, wir können 102 00:05:19,390 --> 00:05:21,620 ‫hineinzoomen, aber der Stil ist wirklich nicht 103 00:05:21,620 --> 00:05:24,110 ‫so schön und passt nicht wirklich zu 104 00:05:24,110 --> 00:05:25,090 ‫unserer Website, 105 00:05:25,090 --> 00:05:27,198 ‫und natürlich haben wir auch unsere 106 00:05:27,198 --> 00:05:29,627 ‫Standorte nirgendwo auf der Karte eingezeichnet Karte. 107 00:05:29,627 --> 00:05:33,700 ‫Und darum kümmern wir uns jetzt. 108 00:05:33,700 --> 00:05:35,914 ‫Kehren wir zu Mapbox zurück, 109 00:05:35,914 --> 00:05:38,783 ‫und jetzt gehen wir in unser Designstudio. 110 00:05:40,280 --> 00:05:42,900 ‫Lassen Sie uns einfach hier auf "mit dem 111 00:05:42,900 --> 00:05:44,720 ‫Entwurf einer Karte beginnen" klicken 112 00:05:44,720 --> 00:05:46,200 ‫oder, falls Ihre Website 113 00:05:46,200 --> 00:05:49,313 ‫jetzt etwas anders aussieht, suchen Sie einfach nach dem Designstudio. 114 00:05:50,680 --> 00:05:53,093 ‫Vielleicht taucht es hier irgendwo auf. 115 00:05:56,220 --> 00:05:57,433 ‫Versuchen wir es also. 116 00:06:01,560 --> 00:06:04,330 ‫Hier können wir wirklich alle möglichen Dinge 117 00:06:04,330 --> 00:06:07,010 ‫tun, um eine Karte zu entwerfen. 118 00:06:07,010 --> 00:06:10,340 ‫Eigentlich ist das nicht wirklich das, was ich 119 00:06:10,340 --> 00:06:13,670 ‫erwartet habe, weil es ein bisschen zu komplex 120 00:06:13,670 --> 00:06:15,090 ‫ist, all das 121 00:06:15,090 --> 00:06:18,670 ‫hier zu ändern, aber es gibt einige Standardstile, ah 122 00:06:18,670 --> 00:06:20,670 ‫ja, danach habe ich gesucht. 123 00:06:21,520 --> 00:06:23,640 ‫Lassen Sie uns hier einen neuen 124 00:06:23,640 --> 00:06:27,790 ‫Stil erstellen, und dann können wir von dort aus einen Standard auswählen. 125 00:06:27,790 --> 00:06:30,483 ‫Und was ich wirklich will, ist dieser leichte Stil. 126 00:06:31,400 --> 00:06:34,560 ‫Also kreiere, und eigentlich bin ich sehr zufrieden 127 00:06:34,560 --> 00:06:37,330 ‫damit, wie es aus dem Karton aussieht. 128 00:06:37,330 --> 00:06:39,972 ‫Nun, aus irgendeinem Grund sehe ich hier 129 00:06:39,972 --> 00:06:43,937 ‫nichts, okay, das liegt daran, dass es ins Meer gezoomt wurde. 130 00:06:43,937 --> 00:06:48,937 ‫Aber egal, lass uns jetzt hier irgendwo reinzoomen, und ich finde 131 00:06:50,570 --> 00:06:53,830 ‫es sieht schon ganz nett aus, 132 00:06:53,830 --> 00:06:57,407 ‫also fügen wir hier einfach einen Namen hinzu, 133 00:06:57,407 --> 00:06:58,550 ‫und deshalb 134 00:07:00,790 --> 00:07:04,968 ‫nenne ich es Natour's Video Recording, weil ich schon 135 00:07:04,968 --> 00:07:08,430 ‫einen Natour-Stil habe, aber du natürlich kann 136 00:07:08,430 --> 00:07:11,724 ‫man es nennen wie man will. 137 00:07:11,724 --> 00:07:16,340 ‫Bestätigen wir hier den Namen, gehen wir zurück und dann 138 00:07:16,340 --> 00:07:19,230 ‫hier weiter zum Teilen und Verwenden. 139 00:07:19,230 --> 00:07:23,393 ‫Und wir wollen nicht teilen, sondern nutzen. 140 00:07:23,393 --> 00:07:28,393 ‫Irgendwo hier unten sollten wir unsere Style-URL sehen, und also, 141 00:07:28,640 --> 00:07:30,960 ‫ja, das ist es. 142 00:07:30,960 --> 00:07:34,877 ‫Es muss sich also um eine URL handeln, die grundsätzlich mit Mapbox beginnt. 143 00:07:37,480 --> 00:07:40,630 ‫Kopieren wir es einfach, gehen zurück und ersetzen dann den 144 00:07:40,630 --> 00:07:43,640 ‫Stil, den wir hier als Standard haben, durch den, 145 00:07:43,640 --> 00:07:45,363 ‫den wir gerade erstellt haben. 146 00:07:47,699 --> 00:07:49,363 ‫Speichern Sie es, 147 00:07:50,750 --> 00:07:51,630 ‫und 148 00:07:54,060 --> 00:07:56,650 ‫ja, das sieht viel besser aus. 149 00:07:56,650 --> 00:07:59,650 ‫Und es ist genau der Stil, den wir gerade geschaffen haben. 150 00:07:59,650 --> 00:08:02,473 ‫So können wir jetzt hineinzoomen, herauszoomen oder 151 00:08:02,473 --> 00:08:04,830 ‫umgekehrt, wir können die Karte 152 00:08:04,830 --> 00:08:07,433 ‫an jede beliebige Stelle schwenken und 153 00:08:08,964 --> 00:08:13,136 ‫wir können auch eine Menge Eigenschaften und Optionen für 154 00:08:13,136 --> 00:08:15,123 ‫diese Karte definieren. 155 00:08:15,960 --> 00:08:17,810 ‫Wenn wir die Karte gerade laden, 156 00:08:17,810 --> 00:08:19,230 ‫sieht sie immer 157 00:08:19,230 --> 00:08:21,510 ‫gleich aus, immer zentriert hier in Boston. 158 00:08:21,510 --> 00:08:24,230 ‫Aber wir können das ändern, indem wir hier 159 00:08:25,720 --> 00:08:26,803 ‫das Zentrum angeben. 160 00:08:28,600 --> 00:08:31,580 ‫Also müssen wir ein Array von zwei Koordinaten eingeben. 161 00:08:31,580 --> 00:08:34,610 ‫Holen wir uns tatsächlich diejenige aus LA, 162 00:08:34,610 --> 00:08:37,473 ‫die wir zuvor in Postman verwendet haben. 163 00:08:42,356 --> 00:08:43,189 ‫Also 164 00:08:48,210 --> 00:08:51,870 ‫genau das, aber eigentlich ist Mapbox genau wie MongoDB, 165 00:08:51,870 --> 00:08:55,200 ‫insofern, als zuerst ein Längen- und dann ein 166 00:08:55,200 --> 00:08:56,603 ‫Breitengrad erforderlich ist. 167 00:08:58,270 --> 00:09:00,020 ‫Wir müssen sie hier umstellen. 168 00:09:02,925 --> 00:09:05,363 ‫Und schauen wir uns an, was wir bekommen. 169 00:09:07,330 --> 00:09:10,083 ‫Und, na ja, das bringt uns nicht wirklich weiter. 170 00:09:12,330 --> 00:09:15,953 ‫Lassen Sie uns hier auch eine Zoomstufe angeben. 171 00:09:17,310 --> 00:09:18,400 ‫Sagen wir vier. 172 00:09:18,400 --> 00:09:19,843 ‫Vielleicht behebt es das. 173 00:09:26,030 --> 00:09:29,153 ‫Und tatsächlich war das diese Illusion. 174 00:09:30,221 --> 00:09:33,150 ‫Es gibt also verschiedene Zoomstufen. 175 00:09:33,150 --> 00:09:35,820 ‫Zum Beispiel können wir hier auch einen 176 00:09:35,820 --> 00:09:38,760 ‫ausprobieren, und der sollte dann viel stärker hineingezoomt oder vielleicht 177 00:09:38,760 --> 00:09:41,460 ‫herausgezoomt werden, da bin ich mir nicht ganz sicher. 178 00:09:41,460 --> 00:09:45,040 ‫Ah, okay, das zoomt es wirklich ganz heraus. 179 00:09:45,040 --> 00:09:46,943 ‫Sagen wir hier zum Beispiel 10, 180 00:09:49,180 --> 00:09:51,430 ‫und wie Sie sehen, spiele ich wirklich 181 00:09:51,430 --> 00:09:53,320 ‫gerne mit dieser Art 182 00:09:53,320 --> 00:09:57,360 ‫von Sachen herum, und ja, bei 10 ist es jetzt wirklich nah gezoomt. 183 00:09:57,360 --> 00:10:00,913 ‫Wir können auch sagen, dass es nicht interaktiv sein soll, 184 00:10:02,130 --> 00:10:04,400 ‫und das ist sehr einfach. 185 00:10:04,400 --> 00:10:07,683 ‫Setzen wir Interactive auf false. 186 00:10:08,610 --> 00:10:10,610 ‫Und dann wird Ihre Karte 187 00:10:10,610 --> 00:10:13,823 ‫im Grunde wie ein einfaches Bild auf Ihrer Website aussehen. 188 00:10:15,960 --> 00:10:18,570 ‫Wie Sie sehen, kann ich hier nichts scrollen, und 189 00:10:18,570 --> 00:10:20,650 ‫ich kann es auch nicht schwenken. 190 00:10:20,650 --> 00:10:22,955 ‫Also kann ich jetzt nichts machen. 191 00:10:22,955 --> 00:10:25,940 ‫Und dies sind eigentlich nur ein paar Optionen, die wir 192 00:10:25,940 --> 00:10:26,803 ‫einstellen können. 193 00:10:29,010 --> 00:10:32,090 ‫Kehren wir hier zu 194 00:10:32,090 --> 00:10:36,093 ‫Mapbox zurück, zur Dokumentation und zu Mapbox-JavaScript. 195 00:10:39,160 --> 00:10:42,020 ‫Hier erhalten Sie die gesamte Dokumentation für 196 00:10:42,020 --> 00:10:46,300 ‫wirklich alles, was Sie mit der JavaScript-Version von Mapbox machen können. 197 00:10:46,300 --> 00:10:48,790 ‫Was ich Ihnen nur zeigen wollte, ist, dass das Zeug, 198 00:10:48,790 --> 00:10:51,240 ‫das ich Ihnen gerade gezeigt habe, tatsächlich hier ist. 199 00:10:51,240 --> 00:10:53,550 ‫Wir haben also den Container, den wir spezifiziert haben, 200 00:10:53,550 --> 00:10:55,023 ‫wir haben den Stil 201 00:10:55,990 --> 00:10:57,970 ‫und wir haben wirklich eine Menge Zeug. 202 00:10:57,970 --> 00:10:59,720 ‫So interaktiv, und wenn 203 00:10:59,720 --> 00:11:02,750 ‫Sie möchten, können Sie natürlich mit all diesen 204 00:11:02,750 --> 00:11:03,873 ‫Dingen herumspielen. 205 00:11:05,192 --> 00:11:08,120 ‫Ich wollte Ihnen nur zeigen, dass Sie 206 00:11:08,120 --> 00:11:11,400 ‫auf diese Weise mehr über Mapbox erfahren können. 207 00:11:11,400 --> 00:11:14,496 ‫Nun, wir wollen eigentlich nichts davon. 208 00:11:14,496 --> 00:11:17,800 ‫Weil wir die Karte nirgendwo zentrieren möchten, 209 00:11:17,800 --> 00:11:20,490 ‫sondern die Position der 210 00:11:20,490 --> 00:11:24,551 ‫Karte basierend auf unseren Tour-Standortpunkten automatisch ermitteln soll. 211 00:11:24,551 --> 00:11:26,739 ‫Was wir jetzt tun werden, 212 00:11:26,739 --> 00:11:30,410 ‫ist, alle Orte für eine bestimmte Tour auf der Karte 213 00:11:30,410 --> 00:11:32,660 ‫zu platzieren und dann der Karte 214 00:11:32,660 --> 00:11:36,180 ‫zu erlauben, automatisch herauszufinden, welcher Teil der Karte angezeigt 215 00:11:36,180 --> 00:11:39,280 ‫werden soll, um alle diese Punkte richtig einzupassen. 216 00:11:39,280 --> 00:11:41,540 ‫Als erstes müssen wir eine 217 00:11:41,540 --> 00:11:43,713 ‫gebundene Variable erstellen. 218 00:11:47,060 --> 00:11:52,060 ‫Bounds gleich einer neuen Mapbox GL. Breitengrad-Längengrenzen. 219 00:12:00,360 --> 00:12:03,320 ‫Und wir erhalten Zugriff auf dieses Mapbox-Objekt, weil 220 00:12:03,320 --> 00:12:05,520 ‫wir die Mapbox-Bibliothek am Anfang unserer 221 00:12:05,520 --> 00:12:06,983 ‫Seite eingefügt haben. 222 00:12:09,210 --> 00:12:10,113 ‫Genau 223 00:12:11,270 --> 00:12:12,883 ‫hier, einschließlich dieses Skripts 224 00:12:14,050 --> 00:12:15,760 ‫hier, also dieser Mapbox-Bibliothek, macht 225 00:12:15,760 --> 00:12:18,760 ‫dies das Mapbox GL-Objekt verfügbar, das wir dann 226 00:12:18,760 --> 00:12:21,193 ‫auf unserer gesamten Site verwenden können. 227 00:12:24,180 --> 00:12:26,870 ‫Dieses Begrenzungsobjekt hier ist im Grunde 228 00:12:26,870 --> 00:12:29,589 ‫der Bereich, der auf der Karte angezeigt wird. 229 00:12:29,589 --> 00:12:32,860 ‫Wir werden dies nun um alle Standorte erweitern, die 230 00:12:32,860 --> 00:12:35,043 ‫sich in unserem Standort-Array befinden. 231 00:12:35,043 --> 00:12:37,597 ‫Und das wird ein bisschen mehr Sinn machen, 232 00:12:37,597 --> 00:12:39,333 ‫sobald wir damit anfangen. 233 00:12:41,490 --> 00:12:44,050 ‫Lassen Sie uns nun alle unsere Standorte durchgehen und 234 00:12:44,050 --> 00:12:46,203 ‫für jeden von ihnen eine Markierung hinzufügen. 235 00:12:48,150 --> 00:12:49,750 ‫Sehen wir uns 236 00:12:49,750 --> 00:12:52,313 ‫für jeden Standort die Sperre 237 00:12:54,840 --> 00:12:58,150 ‫an, und hier möchten wir eine Markierung hinzufügen. 238 00:12:58,150 --> 00:13:00,160 ‫Und dafür müssen wir tatsächlich ein 239 00:13:00,160 --> 00:13:02,053 ‫neues HTML-Element erstellen, in dieser 240 00:13:04,228 --> 00:13:07,900 ‫Hinsicht ist es wirklich ein bisschen auf niedrigem Niveau, aber 241 00:13:07,900 --> 00:13:09,780 ‫das finde ich eigentlich 242 00:13:09,780 --> 00:13:12,230 ‫sehr schön, weil wir so viel Kontrolle 243 00:13:12,230 --> 00:13:15,110 ‫darüber haben, was tatsächlich passiert in unserer Karte. 244 00:13:15,110 --> 00:13:17,070 ‫Und was ich Ihnen hier 245 00:13:17,070 --> 00:13:19,366 ‫zeige, ist eigentlich nur ein winziger Bruchteil all 246 00:13:19,366 --> 00:13:22,083 ‫der großartigen Dinge, die Sie mit Mapbox machen können. 247 00:13:23,525 --> 00:13:26,593 ‫Dies hier ist nur ein Standard-JavaScript, und 248 00:13:26,593 --> 00:13:28,928 ‫wir können das Element 249 00:13:28,928 --> 00:13:31,490 ‫create verwenden, um Elemente zu erstellen. 250 00:13:31,490 --> 00:13:33,040 ‫Wie der Name schon sagt, 251 00:13:33,040 --> 00:13:35,490 ‫und hier wollen wir ein neues Diff erstellen. 252 00:13:35,490 --> 00:13:38,653 ‫Und wir möchten auch einen Klassennamen vergeben und diesen 253 00:13:44,700 --> 00:13:46,193 ‫auf Marker setzen. 254 00:13:47,945 --> 00:13:50,170 ‫Und hier ist es, es ist ein Semikolon. 255 00:13:50,170 --> 00:13:52,500 ‫Und so haben wir im CSS dann tatsächlich 256 00:13:52,500 --> 00:13:54,313 ‫eine Klasse für diesen Marker. 257 00:13:57,140 --> 00:14:00,870 ‫Marker, hier sehen Sie das angegebene Hintergrundbild, das 258 00:14:00,870 --> 00:14:03,459 ‫hier dieser grüne Pin ist. 259 00:14:03,459 --> 00:14:07,210 ‫Dieser Pin, den Sie gleich auf der Karte sehen werden, ist 260 00:14:07,210 --> 00:14:10,110 ‫eigentlich ein benutzerdefiniertes Bild, das ich entworfen habe. 261 00:14:10,110 --> 00:14:13,070 ‫Es kommt nicht direkt von Mapbox. 262 00:14:13,070 --> 00:14:16,500 ‫So können Sie es wirklich an Ihren eigenen Stil und Ihre eigene 263 00:14:16,500 --> 00:14:17,333 ‫Marke anpassen. 264 00:14:17,333 --> 00:14:21,733 ‫Ich habe hier auch die Größe des Markers definiert, ja, 265 00:14:23,500 --> 00:14:25,363 ‫er ist wirklich anpassbar. 266 00:14:27,362 --> 00:14:32,335 ‫Jetzt erstellen wir tatsächlich einen neuen Marker in Mapbox, indem wir 267 00:14:32,335 --> 00:14:37,257 ‫new Mapbox GL sagen. Marker. 268 00:14:40,230 --> 00:14:45,230 ‫Und dann übergeben wir dort das Element, das wir gerade erstellt haben, also 269 00:14:45,400 --> 00:14:49,503 ‫L, und dann geben wir auch eine Ankereigenschaft an. 270 00:14:51,100 --> 00:14:52,090 ‫Was ich 271 00:14:53,440 --> 00:14:54,910 ‫hier auf den Grund setze. 272 00:14:54,910 --> 00:14:58,610 ‫Und das bedeutet, dass es die Unterseite des Elements ist, 273 00:14:58,610 --> 00:15:01,230 ‫und in diesem Fall die Unterseite 274 00:15:01,230 --> 00:15:04,683 ‫dieses Pins, der sich an der genauen GPS-Position befindet. 275 00:15:05,790 --> 00:15:07,710 ‫Wir könnten es auch in 276 00:15:07,710 --> 00:15:10,113 ‫die Mitte setzen, aber ich denke, es 277 00:15:11,260 --> 00:15:13,690 ‫macht mehr Sinn, dass wir das Bild 278 00:15:13,690 --> 00:15:16,520 ‫noch einmal öffnen, ich denke, es ist sinnvoller, 279 00:15:16,520 --> 00:15:19,110 ‫dass dieses Ende des Bildes wirklich auf die 280 00:15:19,110 --> 00:15:20,663 ‫genaue GPS-Position hinweist. 281 00:15:22,512 --> 00:15:26,040 ‫Das machen wir mit dieser Ankereigenschaft. 282 00:15:26,040 --> 00:15:27,680 ‫Das ist also 283 00:15:27,680 --> 00:15:31,896 ‫der Marker, und jetzt können wir einige Methoden aufrufen. 284 00:15:31,896 --> 00:15:35,600 ‫Im Moment weiß Mapbox nichts über die GPS-Koordinaten 285 00:15:35,600 --> 00:15:36,635 ‫dieses Markers. 286 00:15:36,635 --> 00:15:39,250 ‫Das haben wir nirgendwo eingestellt. 287 00:15:39,250 --> 00:15:40,580 ‫Machen wir das 288 00:15:40,580 --> 00:15:44,960 ‫jetzt, also stellen Sie Längengrad, Breitengrad und gleich dem 289 00:15:44,960 --> 00:15:47,423 ‫Standort ein. Koordinaten. 290 00:15:49,364 --> 00:15:54,301 ‫Denken Sie daran, dass dies hier ein Array von Längen- 291 00:15:54,301 --> 00:15:55,990 ‫und Breitengraden ist. 292 00:15:55,990 --> 00:15:59,471 ‫Genau das erwartet Mapbox. 293 00:15:59,471 --> 00:16:02,540 ‫Um sicher zu gehen, dass Sie es wirklich verstehen, 294 00:16:02,540 --> 00:16:04,633 ‫schauen wir uns die Touren an. 295 00:16:05,719 --> 00:16:09,670 ‫Auch hier hat jeder Standort diese Koordinateneigenschaft, und daher lesen 296 00:16:09,670 --> 00:16:12,693 ‫wir jetzt die Koordinaten von dort. 297 00:16:13,915 --> 00:16:16,323 ‫Standort. Koordinaten. 298 00:16:18,040 --> 00:16:23,040 ‫Und dann fügen Sie schließlich zu und dann unsere Kartenvariable hinzu. 299 00:16:25,070 --> 00:16:28,850 ‫Diese Karte hier ist also diese Kartenvariable, in der wir 300 00:16:28,850 --> 00:16:33,093 ‫unsere neue Mapbox erstellt haben. Karte gleich am Anfang. 301 00:16:34,507 --> 00:16:38,320 ‫Und jetzt müssen wir nur noch 302 00:16:38,320 --> 00:16:40,463 ‫unsere Grenzen erweitern. 303 00:16:41,490 --> 00:16:46,490 ‫Also Grenzen. erweitern und auch mit Standorten, oder eigentlich "loc", 304 00:16:48,540 --> 00:16:52,033 ‫was der aktuelle Standort ist. Koordinaten. 305 00:16:56,310 --> 00:16:59,720 ‫Dieser erste Teil hier fügt tatsächlich den Marker 306 00:16:59,720 --> 00:17:00,950 ‫hinzu, oder 307 00:17:00,950 --> 00:17:03,120 ‫er erstellt, lass es uns 308 00:17:03,120 --> 00:17:04,310 ‫noch 309 00:17:08,550 --> 00:17:09,910 ‫spezifischer machen, Marker 310 00:17:11,500 --> 00:17:15,540 ‫erstellen, dann den Marker hinzufügen und dann hier die 311 00:17:18,600 --> 00:17:21,653 ‫Kartengrenzen erweitern, um den aktuellen Standort einzuschließen. 312 00:17:22,624 --> 00:17:25,410 ‫Aber das ist noch nicht genug, denn jetzt machen 313 00:17:25,410 --> 00:17:27,850 ‫wir es auch so, dass die Karte tatsächlich 314 00:17:27,850 --> 00:17:29,560 ‫in die Grenzen passt. 315 00:17:29,560 --> 00:17:34,560 ‫Also Karte. passen, nein, nicht finden, sondern Grenzen einpassen, 316 00:17:39,310 --> 00:17:41,743 ‫und dann natürlich unser Bounds-Objekt. 317 00:17:42,640 --> 00:17:43,473 ‫Wütend. 318 00:17:43,473 --> 00:17:48,473 ‫Es ist also eine Menge Arbeit, nur einige Markierungen auf der Karte zu setzen. 319 00:17:48,530 --> 00:17:50,829 ‫Aber auch hier finde ich es sehr angenehm, 320 00:17:50,829 --> 00:17:52,533 ‫mit dieser Bibliothek zu arbeiten. 321 00:17:53,840 --> 00:17:55,800 ‫Und jetzt schauen wir doch mal rein und 322 00:17:55,800 --> 00:17:58,450 ‫ich bin mir nicht ganz sicher, ob hier alles gut gelaufen ist. 323 00:18:00,430 --> 00:18:02,300 ‫Und tatsächlich war es nicht so, also 324 00:18:02,300 --> 00:18:05,264 ‫sind unsere Karten nicht wirklich nirgendwo zu finden. Zoomen wir einfach 325 00:18:05,264 --> 00:18:07,630 ‫ein wenig heraus, um zu sehen, ob sie sich 326 00:18:07,630 --> 00:18:09,083 ‫tatsächlich irgendwo befinden, und sie 327 00:18:10,049 --> 00:18:11,253 ‫sind es nicht. 328 00:18:13,070 --> 00:18:15,220 ‫Schauen wir uns unsere Konsole 329 00:18:15,220 --> 00:18:17,883 ‫an, und tatsächlich ist ein Fehler aufgetreten. 330 00:18:18,910 --> 00:18:23,250 ‫Breitengradgrenzen sind also kein Konstruktor, und 331 00:18:23,250 --> 00:18:26,150 ‫tatsächlich ist es umgekehrt. 332 00:18:26,150 --> 00:18:28,750 ‫Auch hier erwartet Mapbox, genau wie MongoDB, 333 00:18:28,750 --> 00:18:31,350 ‫als Koordinaten zuerst den Längengrad und 334 00:18:31,350 --> 00:18:32,900 ‫dann den Breitengrad. 335 00:18:32,900 --> 00:18:34,314 ‫Das haben wir 336 00:18:34,314 --> 00:18:36,420 ‫hier in diesem Namen, und hier 337 00:18:36,420 --> 00:18:38,350 ‫sollte es auch so sein. 338 00:18:38,350 --> 00:18:42,813 ‫Also Längengrad, Breitengrad. 339 00:18:44,616 --> 00:18:47,193 ‫Versuchen wir es hier noch einmal. 340 00:18:48,990 --> 00:18:51,360 ‫Ahh, das funktioniert jetzt. 341 00:18:51,360 --> 00:18:52,900 ‫Sehr schön. 342 00:18:52,900 --> 00:18:54,660 ‫Du hast diesen schönen Zoom gesehen. 343 00:18:54,660 --> 00:18:57,290 ‫Das ist, was die Fit Bounds-Methode macht. 344 00:18:57,290 --> 00:19:00,370 ‫Es bewegt und zoomt die Karte also bis an die 345 00:19:00,370 --> 00:19:03,000 ‫Grenzen, damit sie tatsächlich zu unseren Markierungen passt. 346 00:19:03,000 --> 00:19:07,180 ‫Nun sehen Sie, dass wir diese Art von anderen Elementen hier haben, 347 00:19:07,180 --> 00:19:08,943 ‫die unsere Karte überlappen. 348 00:19:08,943 --> 00:19:11,740 ‫Und das liegt an diesem Design, das ich 349 00:19:11,740 --> 00:19:14,470 ‫hier mit diesen Kanten erstellt habe. 350 00:19:14,470 --> 00:19:16,490 ‫Aber das ist kein 351 00:19:16,490 --> 00:19:20,323 ‫Problem, denn wir können diese Grenzen tatsächlich manuell auffüllen. 352 00:19:21,290 --> 00:19:23,860 ‫Wir können hier ein Objekt übergeben, 353 00:19:23,860 --> 00:19:27,363 ‫also sagen wir oben 200 Pixel, unten auch 354 00:19:30,430 --> 00:19:32,830 ‫200 Pixel und dann 355 00:19:32,830 --> 00:19:35,273 ‫links und rechts 100 Pixel. 356 00:19:42,561 --> 00:19:45,100 ‫Und wir müssen die Pixel hier nicht angeben, ich 357 00:19:45,100 --> 00:19:47,883 ‫schätze, das liegt nur daran, dass ich so viel CSS schreibe. 358 00:19:50,780 --> 00:19:52,053 ‫Versuchen wir es noch einmal. 359 00:19:53,635 --> 00:19:55,440 ‫Oh, schöne Zoom-Animation, aber 360 00:19:55,440 --> 00:19:58,023 ‫das hat unsere Einstellungen nicht wirklich respektiert. 361 00:19:59,110 --> 00:20:02,850 ‫Und das liegt tatsächlich daran, dass dies nicht richtig ist. 362 00:20:02,850 --> 00:20:05,180 ‫Also sollten wir stattdessen ein Objekt erstellen, 363 00:20:05,180 --> 00:20:08,150 ‫und dann müssen wir dort die padding-Eigenschaft angeben, die 364 00:20:08,150 --> 00:20:09,673 ‫dann all dies hat. 365 00:20:10,920 --> 00:20:11,770 ‫Also machen wir das. 366 00:20:14,130 --> 00:20:14,963 ‫Polsterung. 367 00:20:17,180 --> 00:20:18,013 ‫Und jetzt, schneiden 368 00:20:19,020 --> 00:20:20,913 ‫Sie das aus und legen Sie es dort ab. 369 00:20:23,970 --> 00:20:25,113 ‫Sparen Sie hier. 370 00:20:27,790 --> 00:20:28,883 ‫Ein Mal noch. 371 00:20:31,750 --> 00:20:34,310 ‫Mann, irgendwas stimmt hier noch nicht. 372 00:20:34,310 --> 00:20:35,840 ‫Was ist das? 373 00:20:35,840 --> 00:20:39,560 ‫Ahh, und dieser Code sollte natürlich nicht hier sein. 374 00:20:39,560 --> 00:20:43,913 ‫Es ist nicht in der Ausdehnung, es ist tatsächlich hier in geeigneten Grenzen. 375 00:20:45,060 --> 00:20:47,633 ‫Hier macht es also tatsächlich Sinn. 376 00:20:52,620 --> 00:20:57,333 ‫Lassen Sie uns diesen Code hier korrigieren, und das macht jetzt Sinn. 377 00:20:59,144 --> 00:21:00,890 ‫Natürlich muss es innerhalb 378 00:21:00,890 --> 00:21:03,460 ‫der Anpassungsgrenzen liegen, was letztendlich die Funktion ist, 379 00:21:03,460 --> 00:21:05,750 ‫die das Verschieben und das Zoomen ausführt. 380 00:21:05,750 --> 00:21:07,430 ‫Hier sollte die Auffüllung 381 00:21:07,430 --> 00:21:10,400 ‫sein, und wir könnten eine Reihe anderer Optionen angeben. 382 00:21:10,400 --> 00:21:12,320 ‫Und wenn Sie daran interessiert 383 00:21:12,320 --> 00:21:14,713 ‫sind, schauen Sie sich einfach die Dokumentation an. 384 00:21:15,810 --> 00:21:17,680 ‫Also ein dritter Versuch 385 00:21:17,680 --> 00:21:19,730 ‫hier, hoffentlich habe ich es diesmal 386 00:21:19,730 --> 00:21:23,520 ‫richtig gemacht, ahh, und ja, das sieht viel besser aus. 387 00:21:23,520 --> 00:21:26,980 ‫Aber es gibt noch einige Dinge, die wir hier verbessern können, 388 00:21:26,980 --> 00:21:29,680 ‫denn im Moment können wir nicht einmal wissen, 389 00:21:29,680 --> 00:21:31,670 ‫was jeder dieser Orte ist. 390 00:21:31,670 --> 00:21:35,290 ‫Und deshalb wollen wir hier eigentlich eine Art Pop-Up, 391 00:21:35,290 --> 00:21:38,373 ‫das dann Informationen zum Standort anzeigt. 392 00:21:41,110 --> 00:21:45,043 ‫Nicht nur die Markierung, sondern wir möchten auch ein Pop-up hinzufügen. 393 00:21:49,270 --> 00:21:52,630 ‫Und das ist ein bisschen ähnlich wie das Hinzufügen des Markers, 394 00:21:52,630 --> 00:21:57,133 ‫also sagen wir neue Mapbox GL. Pop-up. 395 00:21:59,800 --> 00:22:02,300 ‫Dann geben wir wie zuvor die Koordinaten 396 00:22:02,300 --> 00:22:03,623 ‫dieses Pop-ups an. 397 00:22:05,940 --> 00:22:07,523 ‫Also das hier. 398 00:22:08,610 --> 00:22:11,900 ‫Dann müssen wir auch den HTML-Code für dieses Popup 399 00:22:11,900 --> 00:22:14,990 ‫definieren, und ich werde das jetzt mit der 400 00:22:14,990 --> 00:22:17,730 ‫set html-Methode tun, weil ich dann etwas 401 00:22:17,730 --> 00:22:19,950 ‫Inhalt direkt in diesen 402 00:22:19,950 --> 00:22:24,353 ‫HTML-Code einfügen kann, also set html und dann a Vorlagenstring hier. 403 00:22:26,040 --> 00:22:28,030 ‫Ich möchte, dass dies ein Absatz 404 00:22:28,030 --> 00:22:30,760 ‫ist, und die Informationen, die ich hier anzeigen möchte, 405 00:22:30,760 --> 00:22:33,630 ‫sind der Tag, an dem wir an diesem Ort 406 00:22:33,630 --> 00:22:36,250 ‫sein werden, und dann der Name des Ortes. 407 00:22:36,250 --> 00:22:39,730 ‫Im Grunde möchte ich also den Tag anzeigen, 408 00:22:39,730 --> 00:22:43,300 ‫deshalb haben wir hier diese Tageseigenschaften erstellt und 409 00:22:43,300 --> 00:22:44,753 ‫dann die Beschreibung. 410 00:22:50,170 --> 00:22:54,520 ‫Tag und dann Standort, merken Sie sich, welcher der aktuelle 411 00:22:54,520 --> 00:22:56,623 ‫Standort-Indie für jede Schleife ist, 412 00:22:57,860 --> 00:22:58,853 ‫und dann Tag, 413 00:23:01,720 --> 00:23:03,543 ‫Standort. Bezeichnung. 414 00:23:06,870 --> 00:23:07,980 ‫Sparen Sie 415 00:23:07,980 --> 00:23:10,210 ‫hier, das sieht jetzt viel schöner aus. 416 00:23:10,210 --> 00:23:14,010 ‫Und dann, genau wie bei dem anderen, 417 00:23:14,010 --> 00:23:19,010 ‫müssen wir auch add to und dann unsere map-Variable machen. 418 00:23:22,130 --> 00:23:24,380 ‫Und das wird nicht perfekt aussehen, da 419 00:23:24,380 --> 00:23:26,730 ‫wir einige Optionen angeben müssen, aber das Ergebnis 420 00:23:26,730 --> 00:23:29,083 ‫wollte ich Ihnen an dieser Stelle dennoch zeigen. 421 00:23:32,070 --> 00:23:35,100 ‫Sie sehen also, dass sie die Markierungen 422 00:23:35,100 --> 00:23:36,453 ‫jetzt tatsächlich überlappen. 423 00:23:37,920 --> 00:23:41,083 ‫Wir können das tatsächlich mit einer Offset-Eigenschaft beheben. 424 00:23:43,560 --> 00:23:46,883 ‫Wir übergeben diese Optionen gleich hier in das neue Pop-up. 425 00:23:48,396 --> 00:23:49,770 ‫Wir 426 00:23:51,390 --> 00:23:54,940 ‫sagen Offset von 30 Pixeln. 427 00:23:54,940 --> 00:23:57,081 ‫Und mir ist auch 428 00:23:57,081 --> 00:23:59,840 ‫aufgefallen, dass wir unten etwas zu viel 429 00:23:59,840 --> 00:24:04,840 ‫Polsterung haben, also reduzieren wir das auf 150 und wiederholen das Ganze. 430 00:24:09,610 --> 00:24:13,190 ‫Und so sieht das ziemlich gut aus, finde ich. 431 00:24:13,190 --> 00:24:15,750 ‫Wer sich also jetzt unsere 432 00:24:15,750 --> 00:24:18,609 ‫Seite anschaut, kann sehr schnell erkennen, was 433 00:24:18,609 --> 00:24:21,533 ‫für ein Reiseverlauf diese Tour sein wird. 434 00:24:21,533 --> 00:24:23,740 ‫Und wenn es zu viele 435 00:24:23,740 --> 00:24:26,423 ‫Informationen gibt, können wir diese Pop-ups auch schließen. 436 00:24:27,680 --> 00:24:30,700 ‫Und wir könnten dieser Karte wirklich alle möglichen Dinge hinzufügen. 437 00:24:30,700 --> 00:24:33,440 ‫Zum Beispiel könnten wir diese Linien hier zwischen 438 00:24:33,440 --> 00:24:35,250 ‫diesen Punkten erstellen und 439 00:24:35,250 --> 00:24:38,570 ‫sie miteinander verbinden, wie eine grüne Linie hier oder so. 440 00:24:38,570 --> 00:24:41,096 ‫Oder wir könnten auch die reale Route 441 00:24:41,096 --> 00:24:42,820 ‫von einem Punkt zum 442 00:24:42,820 --> 00:24:45,350 ‫anderen anzeigen, indem wir im Grunde eine Wegbeschreibung 443 00:24:45,350 --> 00:24:47,610 ‫verwenden, aber halten wir es hier einfach. 444 00:24:47,610 --> 00:24:49,990 ‫Hier bleibt mir nur 445 00:24:49,990 --> 00:24:53,430 ‫noch, die Zoom-Funktionalität tatsächlich zu deaktivieren. 446 00:24:53,430 --> 00:24:55,320 ‫Denn gerade jetzt, 447 00:24:55,320 --> 00:24:57,230 ‫sagen wir, wir zoomen auf 448 00:24:57,230 --> 00:24:59,400 ‫diese Seite, oder tatsächlich, wenn 449 00:24:59,400 --> 00:25:01,450 ‫wir auf dieser Seite scrollen, 450 00:25:01,450 --> 00:25:03,740 ‫und wenn wir dies hier erreichen 451 00:25:03,740 --> 00:25:08,740 ‫und dann hier weiter scrollen, scrollen wir die Karte anstelle der Seite. 452 00:25:09,034 --> 00:25:12,060 ‫Das ist keine gute Benutzererfahrung, und 453 00:25:12,060 --> 00:25:13,673 ‫so müssen wir 454 00:25:13,673 --> 00:25:17,110 ‫jetzt nur noch die Scrollfunktion auf dieser 455 00:25:17,110 --> 00:25:18,410 ‫Karte deaktivieren. 456 00:25:18,410 --> 00:25:22,880 ‫Wir werden den Leuten weiterhin erlauben, so herumzuschwenken, aber 457 00:25:22,880 --> 00:25:24,883 ‫das Zoomen wird deaktiviert. 458 00:25:26,200 --> 00:25:29,463 ‫Gehen wir hier zu unserer Karte und fügen Sie das hinzu. 459 00:25:30,743 --> 00:25:33,760 ‫Und wir verwenden keine interaktiven Standardeinstellungen, weil wir dann 460 00:25:33,760 --> 00:25:35,970 ‫nicht einmal die Karte schwenken könnten. 461 00:25:35,970 --> 00:25:39,317 ‫Aber auch das sollte zumindest erlaubt sein. 462 00:25:39,317 --> 00:25:43,680 ‫Die Option, die ich hier einstelle, ist Scroll Zoom false. 463 00:25:46,580 --> 00:25:49,202 ‫Und noch einmal, für alle möglichen Optionen, 464 00:25:49,202 --> 00:25:50,888 ‫die Sie hier 465 00:25:50,888 --> 00:25:55,190 ‫einstellen könnten, werfen Sie einfach einen Blick auf die Referenz. 466 00:25:55,190 --> 00:25:58,730 ‫Wenn wir also jetzt unsere Maus hier platzieren und 467 00:25:58,730 --> 00:26:01,463 ‫scrollen, ändert sich die Zoomstufe nicht. 468 00:26:03,040 --> 00:26:04,530 ‫Perfekt. 469 00:26:04,530 --> 00:26:09,060 ‫Wir können immer noch schwenken, und so finde ich es jetzt wirklich schön. 470 00:26:09,060 --> 00:26:12,083 ‫Lassen Sie uns das in einem anderen testen. 471 00:26:12,920 --> 00:26:14,653 ‫Sagen wir hier den Waldwanderer. 472 00:26:17,290 --> 00:26:19,450 ‫Und so funktioniert das immer noch. 473 00:26:19,450 --> 00:26:22,130 ‫Und diese hier überlappen sich irgendwie, aber 474 00:26:22,130 --> 00:26:25,553 ‫kein Problem, wir können sie jederzeit schließen, wenn wir wollen. 475 00:26:28,120 --> 00:26:30,713 ‫Schauen wir uns hier zum Beispiel Sea Explorer an. 476 00:26:32,420 --> 00:26:33,440 ‫Und wenn wir 477 00:26:33,440 --> 00:26:35,231 ‫schnell genug sind, können wir sogar 478 00:26:35,231 --> 00:26:38,100 ‫sehen, wie die Zoom-Animation die Karte an diese Position bewegt. 479 00:26:38,100 --> 00:26:39,890 ‫Okay, perfekt. 480 00:26:39,890 --> 00:26:42,680 ‫Ich hoffe, Sie konnten diesem Beispiel 481 00:26:42,680 --> 00:26:46,670 ‫bei allem, was wir in Mapbox getan haben, wirklich folgen. 482 00:26:46,670 --> 00:26:49,060 ‫Falls etwas nicht funktioniert, stellen Sie bitte 483 00:26:49,060 --> 00:26:50,330 ‫sicher, dass Sie 484 00:26:50,330 --> 00:26:51,863 ‫eine ähnliche Version wie 485 00:26:52,870 --> 00:26:56,500 ‫meine verwenden, also meine ich eine ähnliche Version der Mapbox-Bibliothek. 486 00:26:56,500 --> 00:26:59,403 ‫Was in meinem Fall hier die Version 0 ist. 54. 487 00:27:00,870 --> 00:27:04,363 ‫Deiner sollte wahrscheinlich nicht 1 sein. etwas. 488 00:27:05,250 --> 00:27:06,600 ‫Wenn Sie sich dieses 489 00:27:06,600 --> 00:27:10,430 ‫Video also lange Zeit nach dieser Aufnahme ansehen und hier eine V1 490 00:27:10,430 --> 00:27:14,891 ‫haben, ändern Sie dies bitte auf 0. etwas, so dass es 491 00:27:14,891 --> 00:27:18,213 ‫dort im Grunde keine Breaking Changes gibt. 492 00:27:19,242 --> 00:27:24,242 ‫Wie auch immer, damit haben wir unsere Tourseite eigentlich abgeschlossen, und 493 00:27:24,560 --> 00:27:27,140 ‫so brauchen wir nichts 494 00:27:27,140 --> 00:27:30,140 ‫mehr davon, die Karte ist auch 495 00:27:30,140 --> 00:27:34,740 ‫da und damit ist dieser Teil der Website eigentlich fertig. 496 00:27:34,740 --> 00:27:35,573 ‫Fantastisch. 497 00:27:35,573 --> 00:27:38,660 ‫Herzlichen Glückwunsch, dass Sie dies in die Tat umgesetzt 498 00:27:38,660 --> 00:27:42,200 ‫haben, dass Sie wirklich begonnen haben, diese schöne Website mit all 499 00:27:42,200 --> 00:27:44,200 ‫diesen erstaunlichen Technologien zu erstellen, die 500 00:27:44,200 --> 00:27:45,663 ‫Sie bisher gelernt haben.