Eine einfache Karte mit weniger HTML

F: Können wir eine Karte mit HTML ohne Javascript anzeigen?
A: Ja, zwei Zeilen HTML mit einem benutzerdefinierten Element

Dieser Artikel soll Ihnen eine einfache Möglichkeit vorstellen, eine Karte auf einer Webseite zu haben. Fügen Sie dazu diese beiden HTML-Zeilen zu Ihrer Webseite hinzu.

<script src="//unpkg.com/[email protected]/dist/mapbox"></script>
<x-mapbox center="Toronto, Canada" access-token="xxxyyy"></x-mapbox>

Sie benötigen ein Zugriffstoken.

Mapbox verwendet Zugriffstoken, um API-Anforderungen Ihrem Konto zuzuordnen. Dieses Token verhindert, dass Sie die Karte missbräuchlich verwenden, und es wird auch verwendet, um Ihnen Rechnungen zu stellen, wenn Ihre Anfragen mehr als 50.000 Anfragen pro Monat betragen.

Ein Zugriffstoken kann <x-mapbox>als Attribut bereitgestellt werden, access-token. Obwohl es möglich ist, ein Zugriffstoken als Attribut bereitzustellen, wird dringend empfohlen, es aus dem JS-Code als window.xKeys.mapbpx, das window.mapboxgl.accessTokenintern verwendet wird, bereitzustellen.

<script>window.xKeys = {mapbox: 'pk.xxxyyyzzz' }</script>
<script src="//unpkg.com/[email protected]/dist/mapbox"></script>
<x-mapbox center="Toronto, Canada"></x-mapbox>

Was ist<x-mapbox>?

<x-mapbox>ist eines der benutzerdefinierten Elemente vonhttps://elements-x.com. Standardmäßig wird eine Karte im Geländemodus angezeigt, aber Sie können in den Satellitenmodus wechseln, indem Sie auf ein Symbol in der oberen rechten Ecke klicken. Es ist einfach zu verwenden, solange Sie elements-x/dist/mapbox.

<x-mapbox>hat mehr Funktionen wie die folgenden;

• Zeigen Sie Markierungen mit oder ohne Popup an.
• Integrierte Geokodierung durch Angabe der Adresse anstelle von Längen- und Breitengrad.
• Suchkarte mit <x-div>und <input>Tags.

Wenn Sie hinzufügen <x-marker>, <x-mapbox>können Sie eine Markierung sehen.

<x-mapbox>
  <x-marker lnglat="1600 pennsilvania ave, ashington DC" center>
  </x-marker>
</x-mapbox>

      

       https://stackblitz.com/edit/x-mapbox-marker?file=index.html
      

Wenn Sie HTML in hinzufügen <x-marker>, können Sie ein Popup sehen.

<x-mapbox>
  <x-marker lnglat="1600 pennsilvania ave, washington DC" center>
    <h3>White House</h3> Trump once lived here.
  </x-marker>
</x-mapbox>

      

       https://stackblitz.com/edit/x-mapbox-marker-popup?file=index.html
      

Um eine Suchfunktion für Ihre Karte zu haben, müssen Sie Ihr <input>und <x-mapbox>mit umschließen <x-div>.

<x-div>
  <b class="label">Search Map:</b>
  <input x-change="set(#marker[lnglat])" />
  <x-mapbox>
    <x-marker id="marker" lnglat="Toronto, Canada" center>
      Looking For Here?
    </x-marker>
  </x-mapbox>
</x-div>

      

       https://stackblitz.com/edit/x-mapbox-search?file=index.html
      

Viel Spaß beim Codieren :)

elements-x ist eine Sammlung benutzerdefinierter Elemente, deren Stil anpassbar und unabhängig von jedem Framework ist.