API - Directions
使用NextBillion.ai Maps API，你可以仅仅使用数行代码从地图数据中获取所有类型的服务以支持你的业务场景。
在本节中，我们将会介绍Directions API。
Directions API 需要输入两个位置信息，分别作为起点和终点，它将会返回两点之间的指示信息。你可以设置各种出行方式，以获得更准确的指示结果。
你可以使用SDK中的内置方法来请求并渲染结果。如果必要的话，你也可以手动处理和可视化这些数据。
在Directions的参考文档中有更为详细的介绍。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>NBMap Basic Example</title>
6 <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12 #map {
13 width: 100vw;
14 height: 100vh;
15 }
16 #add-route {
17 position: absolute;
18 top: 20px;
19 right: 20px;
20 padding: 12px;
21 z-index: 99;
22 }
23 #remove-route {
24 position: absolute;
25 top: 70px;
26 right: 20px;
27 padding: 12px;
28 z-index: 99;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="map"></div>
34 <button id="add-route">Request Direction</button>
35 <button id="remove-route">Remove Direction</button>
36
37 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
38 <script>
39 ;(function () {
40 nextbillion.setApiKey('your-api-key')
41 // 可选项：你可以设置API的host，如果它不是"api.nextbillion.io"
42 nextbillion.setApiHost('your-api-endpoint')
43 var map = new nextbillion.maps.Map(document.getElementById('map'), {
44 zoom: 12,
45 center: { lat: 28.6139, lng: 77.209 },
46 })
47
48 var directionShapes = null
49 document.getElementById('add-route').onclick = async function () {
50 if (directionShapes) {
51 return
52 }
53
54 var resp = await nextbillion.api.Directions({
55 origin: { lat: 24.9048329, lng: 74.5865747 },
56 destination: { lat: 26.82585465, lng: 75.80178009 },
57 })
58
59 directionShapes = map.renderDirections(resp)
60 }
61
62 document.getElementById('remove-route').onclick = function () {
63 if (!directionShapes) {
64 return
65 }
66 map.removeDirections(directionShapes)
67 directionShapes = null
68 }
69 })()
70 </script>
71 </body>
72</html>Make a Map
