HTML이 적은 간단한지도

공급자로서의 Mapbox

Q : 자바 스크립트없이 HTML로지도를 표시 할 수 있습니까?
A : 예, 맞춤 요소가있는 두 줄의 HTML

이 기사는 웹 페이지에지도를 표시하는 간단한 방법을 소개합니다. 이렇게하려면 웹 페이지에이 두 줄의 HTML을 추가하세요.

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

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

액세스 토큰이 필요합니다.

Mapbox는 액세스 토큰을 사용하여 API 요청을 계정과 연결합니다. 이 토큰은지도의 남용을 방지하며, 요청이 한 달에 50,000 건을 초과 할 때 청구하는데도 사용됩니다.

액세스 토큰은 <x-mapbox>속성 으로 제공 될 수 있습니다 access-token. 액세스 토큰을 속성으로 제공 할 수 있지만 JS 코드 window.xKeys.mapbpx에서 window.mapboxgl.accessToken내부적 으로 사용되는 으로 제공하는 것이 좋습니다 .

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

https://account.mapbox.com/

무엇입니까 `<x-mapbox>?`

<x-mapbox> 맞춤 요소 중 하나입니다. https://elements-x.com. 기본적으로지도는 지형 모드로 표시되지만 오른쪽 상단 모서리 아이콘을 클릭하여 위성 모드로 전환 할 수 있습니다. .NET Core를 가져 오는 동안 사용하는 것은 간단합니다 elements-x/dist/mapbox.

<x-mapbox> 다음과 같은 더 많은 기능이 있습니다.

팝업이 있거나없는 마커를 표시합니다.
경도 및 위도 대신 주소를 제공하여 기본 제공되는 지오 코딩.
<x-div>및 <input>태그로 지도를 검색 합니다.

추가함으로써 <x-marker>에서 <x-mapbox>, 당신은 마커를 볼 수 있습니다.

<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

에 HTML을 추가 <x-marker>하면 팝업을 볼 수 있습니다.

<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

지도에 대한 검색 기능을 사용하려면, 당신은 당신의 포장 필요 <input>와 <x-mapbox>함께 <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

해피 코딩 :)

elements-x 는 스타일 사용자 정의가 가능하고 프레임 워크와 독립적 인 사용자 정의 요소 모음입니다.