API - Snap To Roads
使用NextBillion.ai Maps API，你可以仅仅使用数行代码从地图数据中获取所有类型的服务以支持你的业务场景。
在本节中，我们将会介绍Snap To Roads API.
Snap To Roads API接受一系列沿途的位置信息作为输入，它将会返回对齐当前旅行佳匹配道路的一系列位置信息。你可以设置各种参数，比如时间戳或者匹配半径，来优化结果。
你可以使用SDK中的内置方法来请求并渲染结果。如果必要的话，你也可以手动处理和可视化这些数据。
在Snap To Roads的参考文档中有更为详细的介绍。
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 #req-snap-to-road {
17 position: absolute;
18 top: 20px;
19 right: 20px;
20 padding: 12px;
21 z-index: 99;
22 }
23 #remove-snap-to-road {
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="req-snap-to-road">Request Snap To Roads</button>
35 <button id="remove-snap-to-road">Remove Snap To Roads</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 const pathBeforeSnaped = [
49 { lng: 77.21114158630371, lat: 28.604850536014702 },
50 { lng: 77.21084117889404, lat: 28.605199049558387 },
51 { lng: 77.21077680587769, lat: 28.605604077359384 },
52 { lng: 77.21049785614014, lat: 28.606037361185322 },
53 { lng: 77.21032619476318, lat: 28.606159810638356 },
54 { lng: 77.21013307571411, lat: 28.60661193045945 },
55 { lng: 77.21003651618958, lat: 28.60696043816028 },
56 { lng: 77.20970392227173, lat: 28.60726184929353 },
57 { lng: 77.20960736274719, lat: 28.607563259562024 },
58 { lng: 77.20940351486206, lat: 28.608053049403924 },
59 { lng: 77.20922112464905, lat: 28.608401552324047 },
60 { lng: 77.20897436141968, lat: 28.608702959322628 },
61 { lng: 77.20867395401001, lat: 28.608740635136623 },
62 { lng: 77.20829844474792, lat: 28.608693540367003 },
63 { lng: 77.20811605453491, lat: 28.608844243555513 },
64 { lng: 77.20770835876465, lat: 28.608740635136623 },
65 { lng: 77.20752596855164, lat: 28.608571093867152 },
66 { lng: 77.20718264579773, lat: 28.60846748517888 },
67 { lng: 77.20661401748656, lat: 28.608250848500468 },
68 { lng: 77.20619559288025, lat: 28.607958859227068 },
69 { lng: 77.20587372779846, lat: 28.6077516405407 },
70 ]
71
72 let snapToRoadsShapes = null
73 document.getElementById('req-snap-to-road').onclick = async function () {
74 const resp = await nextbillion.api.SnapToRoads({
75 path: pathBeforeSnaped,
76 })
77 // 如果你设置了第二个参数，地图会渲染第二个多边形来表现对齐前的路线。
78 // 省略这个参数可以只渲染对齐结果。
79 snapToRoadsShapes = map.renderSnapToRoads(resp, pathBeforeSnaped)
80 }
81
82 document.getElementById('remove-snap-to-road').onclick = function () {
83 if (!snapToRoadsShapes) {
84 return
85 }
86 map.removeSnapToRoads(snapToRoadsShapes)
87 snapToRoadsShapes = null
88 }
89 })()
90 </script>
91 </body>
92</html>Make a Map
