javascript - 我的表单具有Mapbox路线API？

Question

我想将Mapbox API的路线和地址解析器部分实现到我自己的自定义样式输入中。他们网站上的示例使用了他们的地址解析器，但没有说明如何使用自定义样式的输入表单。我在网上找不到任何示例，对于像我这样的新手来说，我很难找到他们的文档。

最终，我希望用户能够输入起点和目的地，一旦输入，路线就会显示在地图上。

我感谢任何帮助，谢谢:)

这是到目前为止我所拥有的基本版本
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>

Javascript：

    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;
}

Answer 1

Mapbox Directions API依靠坐标对来实现从一个地方到另一个地方的实际路线，因此听起来您需要做的是

1.使用“发件人”和“发件人”输入框的输入，用$.getJSON呼叫Geocoding API。

2.收集该地理编码响应的地理空间结果，并将坐标对以及所需的模式（带交通，汽车，自行车，步行的汽车）以另一个$.getJSON调用的形式传递给Directions API。

3.显示Directions api响应的结果