지도 양식 API 내 양식 사용?

Question

Mapbox API의 방향 및 지오 코더 부분을 내 자신의 사용자 정의 스타일 입력으로 구현하려고합니다. 웹 사이트의 예제는 지오 코더를 사용하지만 사용자 정의 스타일 입력 양식을 사용하는 방법은 설명하지 않습니다. 이 온라인의 예를 찾을 수 없으며 저와 같은 초보자를 위해 설명서를 매우 쉽게 이해할 수 있습니다.

궁극적으로 사용자가 출발점과 목적지를 입력 할 수있게하려면 입력 한 경로가지도에 표시됩니다.

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FtbXkxMSIsImEiOiJjamFib2p6cGwwMjNhMnhtaGptbmF1azJrIn0.OtcZ5rIhMtthxs7yu6KqmQ'; 
var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location 
    center: [-74.50, 40], // starting position [lng, lat] 
    zoom: 9 // starting zoom 
}); 

CSS :

#map { 
    position:absolute; 
    top:200px; 
    bottom:0; 
    width:100%; 
} 

h2 { 
    font-size: 18px; 
    color: #DA7B93; 
    font-family: 'Oxygen', sans-serif; 
    letter-spacing: 30px; 
    margin: 0 auto; 
    padding-top: 10px; 
    padding-bottom: 5px; 
} 

fieldset { 
    border: none; 
    background-color: #2E151B; 
} 

input { 
    color: white; 
    font-size: 24px; 
    background-color: #376E6F; 
    border: none; 
    padding: 4px; 
} 

.set-width { 
    width: 321px; 
} 

#input-space-to { 
    margin-bottom: 5px; 
    width: 321px; 
} 

나는 어떤 도움 감사합니다 :) 여기

지금까지 Here is my custom form and basic map

<div id='map'></div> 
    <form> 
     <fieldset> 
      <h2>FROM</h2> 
      <input type="text" id="input-space-from" name="from"> 
      <br> 
      <h2>TO</h2> 
      <input type="text" id="input-space-to" class="set-width" name="to"> 
      <br> 
     </fieldset> 
    </form> 

자바 스크립트 내가 무슨의 기본 버전을 주셔서 감사합니다

Answer 1

Mapbox 방향 API는 이곳 저곳에서 실제 라우팅 좌표 쌍에 의존, 그래서 당신이해야 할 것은

1.Make "보낸 사람의 입력과 Geocoding API-$.getJSON와 통화처럼 들린다 "및"받는 사람 "입력란에 표시됩니다.

2. 해당 지오 코딩 응답의 지형 공간 결과를 수집하고 원하는 모드 (예 : 자동차, 교통, 자동차, 자전거, 도보)와 함께 좌표 쌍을 Directions API에 $.getJSON 호출 형식으로 전달하십시오.

3. 길항 결과 api 응답