Roads API تا 100 نقطه GPS جمعآوریشده در طول مسیر را میگیرد و مجموعهای از دادههای مشابه را با نقاطی که به محتملترین جادههایی که وسیله نقلیه در آن حرکت میکرده جمعآوری میکند. به صورت اختیاری، می توانید درخواست کنید که نقاط درون یابی شوند و در نتیجه مسیری ایجاد شود که به آرامی از هندسه جاده پیروی می کند.
درخواست ها
درخواست snap to road باید از طریق HTTPS ارسال شود و به شکل زیر باشد:
https://roads.googleapis.com/v1/snapToRoads?parameters&key=YOUR_API_KEY
Required parameters
path
The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|". For example:
path=60.170880,24.942795|60.170879,24.942796|60.170877,24.942796
.Note: The snapping algorithm works best for points that are not too far apart. If you observe odd snapping behavior, try creating paths that have points closer together. To ensure the best snap-to-road quality, you should aim to provide paths on which consecutive pairs of points are within 300m of each other. This will also help in handling any isolated, long jumps between consecutive points caused by GPS signal loss, or noise.
Optional parameters
interpolate
Whether to interpolate a path to include all points forming the full road-geometry. When true, additional interpolated points will also be returned, resulting in a path that smoothly follows the geometry of the road, even around corners and through tunnels. Interpolated paths will most likely contain more points than the original path. Defaults to
false
.
نمونه ها
درخواست زیر نقاط مشخص شده را به هندسه جاده میچسباند. این مجموعه خاص از داده ها یک جاده دایره ای را دنبال می کند. setting interpolate=true
اطمینان حاصل کنید که هندسه برگشتی با انحنای جاده مطابقت دارد. با interpolate=false
، مسیر قطع شده همچنان جاده را دنبال میکند، اما چندخط حاصل به آن هموار نخواهد بود.
URL
https://roads.googleapis.com/v1/snapToRoads ?interpolate=true &path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836 &key=YOUR_API_KEY
CURL
curl -L -X GET 'https://roads.googleapis.com/v1/snapToRoads?path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836&interpolate=true&key=YOUR_API_KEY'
پاسخ ها
برای هر درخواست معتبر، Roads API پاسخی را در قالب نشان داده شده در URL درخواست، مانند پاسخ JSON زیر، برمیگرداند.
{ "snappedPoints": [ { "location": { "latitude": -35.27800489993019, "longitude": 149.129531998742 }, "originalIndex": 0, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.279610999999996, "longitude": 149.1292889 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.280323564795005, "longitude": 149.1290903128365 }, "originalIndex": 1, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280409899999995, "longitude": 149.1290699 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.28048179999999, "longitude": 149.129062 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.2805541, "longitude": 149.1290623 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280695099999996, "longitude": 149.12908489999998 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2807629, "longitude": 149.1291046 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2808294, "longitude": 149.1291306 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2809064, "longitude": 149.1291693 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280968200000004, "longitude": 149.129208 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28101395754623, "longitude": 149.1292430025548 }, "originalIndex": 2, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28103840000001, "longitude": 149.1292617 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810936, "longitude": 149.1293121 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2811784, "longitude": 149.1294706 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812258, "longitude": 149.1295413 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812771, "longitude": 149.12960759999999 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281332, "longitude": 149.1296695 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2813904, "longitude": 149.12972670000002 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281451700000005, "longitude": 149.1297788 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28146506991143, "longitude": 149.12978858234607 }, "originalIndex": 3, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28151580000001, "longitude": 149.1298257 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28158259999999, "longitude": 149.129867 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281666099999995, "longitude": 149.1299091 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2817377, "longitude": 149.1299379 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281810899999996, "longitude": 149.1299602 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281884999999996, "longitude": 149.1299765 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28194399606459, "longitude": 149.1299842294294 }, "originalIndex": 4, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281959799999996, "longitude": 149.12998629999998 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282035199999996, "longitude": 149.1299895 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2821254, "longitude": 149.1299851 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282199999999996, "longitude": 149.1299743 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2822739, "longitude": 149.1299573 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2823468, "longitude": 149.129934 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824178, "longitude": 149.1299043 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.282472999999996, "longitude": 149.1298835 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.2825375, "longitude": 149.1298525 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282665400000006, "longitude": 149.12974459999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28274030000001, "longitude": 149.1296645 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282809799999995, "longitude": 149.12957799999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28282136229385, "longitude": 149.12956142620385 }, "originalIndex": 5, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2828744, "longitude": 149.1294854 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282922299999996, "longitude": 149.1294044 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282931500000004, "longitude": 149.1293876 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.283054, "longitude": 149.1290996 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28313383700836, "longitude": 149.12893500604946 }, "originalIndex": 6, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283134499999996, "longitude": 149.12893409999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283190399999995, "longitude": 149.1288668 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2832503, "longitude": 149.1288041 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833133, "longitude": 149.1287463 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833794, "longitude": 149.128694 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283448299999996, "longitude": 149.128647 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835199, "longitude": 149.1286054 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835934, "longitude": 149.1285699 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283668899999995, "longitude": 149.12854059999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28372649999999, "longitude": 149.1285237 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28386179999999, "longitude": 149.12849319999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2839978, "longitude": 149.1284682 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2840524, "longitude": 149.12845969999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.284341500000004, "longitude": 149.1284124 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.28459730000001, "longitude": 149.1283703 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.284728747199374, "longitude": 149.12834860726772 }, "originalIndex": 7, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, ], }
پاسخ از طرح زیر استفاده می کند.
SnapToRoadsResponse
Field | Required | Type | Description |
---|---|---|---|
| optional | Array< SnappedPoint > | An array of snapped points. See SnappedPoint for more information. |
| optional | string | A string containing a user-visible warning. |
SnappedPoint
Field | Required | Type | Description |
---|---|---|---|
| required | LatitudeLongitudeLiteral | See LatitudeLongitudeLiteral for more information. |
| required | string | A unique identifier for a place. All place IDs returned by the Roads API correspond to road segments. |
| optional | number |
An integer that indicates the corresponding value in the original
request. Each value in the request should map to a snapped value in
the response. However, if you've set interpolate=true or if you're
using nearest roads, then it's possible that the response will
contain more coordinates than the request. Interpolated values will
not have an |
LatitudeLongitudeLiteral
An object describing a specific location with Latitude and Longitude in decimal degrees.
Field | Required | Type | Description |
---|---|---|---|
| required | number | Latitude in decimal degrees |
| required | number | Longitude in decimal degrees |
نسخه ی نمایشی
- برای ایجاد یک مسیر وسیله نقلیه، روی نقشه کلیک کنید. توجه داشته باشید که اگر نقاط شما خیلی از هم فاصله داشته باشند، ممکن است به درستی جابجا نشوند.
- دوبار کلیک کنید تا مسیر خود را به جاده بکشید.
این مثال را تمام صفحه مشاهده کنید.
جاوا اسکریپت
var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize);
جاوا اسکریپت + HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Roads API Demo</title> <style> html, body, #map { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #bar { width: 240px; background-color: rgba(255, 255, 255, 0.75); margin: 8px; padding: 4px; border-radius: 4px; } #autoc { width: 100%; box-sizing: border-box; } </style> <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places&key=YOUR_API_KEY"></script> <script> var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize); </script> </head> <body> <div id="map"></div> <div id="bar"> <p class="auto"><input type="text" id="autoc"/></p> <p><a id="clear" href="#">Click here</a> to clear map.</p> </div> </body> </html>
Roads API تا 100 نقطه GPS جمعآوریشده در طول مسیر را میگیرد و مجموعهای از دادههای مشابه را با نقاطی که به محتملترین جادههایی که وسیله نقلیه در آن حرکت میکرده جمعآوری میکند. به صورت اختیاری، می توانید درخواست کنید که نقاط درون یابی شوند و در نتیجه مسیری ایجاد شود که به آرامی از هندسه جاده پیروی می کند.
درخواست ها
درخواست snap to road باید از طریق HTTPS ارسال شود و به شکل زیر باشد:
https://roads.googleapis.com/v1/snapToRoads?parameters&key=YOUR_API_KEY
Required parameters
path
The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|". For example:
path=60.170880,24.942795|60.170879,24.942796|60.170877,24.942796
.Note: The snapping algorithm works best for points that are not too far apart. If you observe odd snapping behavior, try creating paths that have points closer together. To ensure the best snap-to-road quality, you should aim to provide paths on which consecutive pairs of points are within 300m of each other. This will also help in handling any isolated, long jumps between consecutive points caused by GPS signal loss, or noise.
Optional parameters
interpolate
Whether to interpolate a path to include all points forming the full road-geometry. When true, additional interpolated points will also be returned, resulting in a path that smoothly follows the geometry of the road, even around corners and through tunnels. Interpolated paths will most likely contain more points than the original path. Defaults to
false
.
نمونه ها
درخواست زیر نقاط مشخص شده را به هندسه جاده میچسباند. این مجموعه خاص از داده ها یک جاده دایره ای را دنبال می کند. setting interpolate=true
اطمینان حاصل کنید که هندسه برگشتی با انحنای جاده مطابقت دارد. با interpolate=false
، مسیر قطع شده همچنان جاده را دنبال میکند، اما چندخط حاصل به آن هموار نخواهد بود.
URL
https://roads.googleapis.com/v1/snapToRoads ?interpolate=true &path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836 &key=YOUR_API_KEY
CURL
curl -L -X GET 'https://roads.googleapis.com/v1/snapToRoads?path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836&interpolate=true&key=YOUR_API_KEY'
پاسخ ها
برای هر درخواست معتبر، Roads API پاسخی را در قالب نشان داده شده در URL درخواست، مانند پاسخ JSON زیر، برمیگرداند.
{ "snappedPoints": [ { "location": { "latitude": -35.27800489993019, "longitude": 149.129531998742 }, "originalIndex": 0, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.279610999999996, "longitude": 149.1292889 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.280323564795005, "longitude": 149.1290903128365 }, "originalIndex": 1, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280409899999995, "longitude": 149.1290699 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.28048179999999, "longitude": 149.129062 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.2805541, "longitude": 149.1290623 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280695099999996, "longitude": 149.12908489999998 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2807629, "longitude": 149.1291046 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2808294, "longitude": 149.1291306 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2809064, "longitude": 149.1291693 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280968200000004, "longitude": 149.129208 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28101395754623, "longitude": 149.1292430025548 }, "originalIndex": 2, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28103840000001, "longitude": 149.1292617 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810936, "longitude": 149.1293121 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2811784, "longitude": 149.1294706 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812258, "longitude": 149.1295413 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812771, "longitude": 149.12960759999999 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281332, "longitude": 149.1296695 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2813904, "longitude": 149.12972670000002 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281451700000005, "longitude": 149.1297788 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28146506991143, "longitude": 149.12978858234607 }, "originalIndex": 3, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28151580000001, "longitude": 149.1298257 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28158259999999, "longitude": 149.129867 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281666099999995, "longitude": 149.1299091 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2817377, "longitude": 149.1299379 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281810899999996, "longitude": 149.1299602 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281884999999996, "longitude": 149.1299765 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28194399606459, "longitude": 149.1299842294294 }, "originalIndex": 4, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281959799999996, "longitude": 149.12998629999998 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282035199999996, "longitude": 149.1299895 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2821254, "longitude": 149.1299851 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282199999999996, "longitude": 149.1299743 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2822739, "longitude": 149.1299573 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2823468, "longitude": 149.129934 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824178, "longitude": 149.1299043 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.282472999999996, "longitude": 149.1298835 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.2825375, "longitude": 149.1298525 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282665400000006, "longitude": 149.12974459999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28274030000001, "longitude": 149.1296645 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282809799999995, "longitude": 149.12957799999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28282136229385, "longitude": 149.12956142620385 }, "originalIndex": 5, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2828744, "longitude": 149.1294854 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282922299999996, "longitude": 149.1294044 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282931500000004, "longitude": 149.1293876 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.283054, "longitude": 149.1290996 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28313383700836, "longitude": 149.12893500604946 }, "originalIndex": 6, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283134499999996, "longitude": 149.12893409999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283190399999995, "longitude": 149.1288668 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2832503, "longitude": 149.1288041 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833133, "longitude": 149.1287463 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833794, "longitude": 149.128694 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283448299999996, "longitude": 149.128647 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835199, "longitude": 149.1286054 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835934, "longitude": 149.1285699 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283668899999995, "longitude": 149.12854059999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28372649999999, "longitude": 149.1285237 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28386179999999, "longitude": 149.12849319999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2839978, "longitude": 149.1284682 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2840524, "longitude": 149.12845969999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.284341500000004, "longitude": 149.1284124 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.28459730000001, "longitude": 149.1283703 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.284728747199374, "longitude": 149.12834860726772 }, "originalIndex": 7, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, ], }
پاسخ از طرح زیر استفاده می کند.
SnapToRoadsResponse
Field | Required | Type | Description |
---|---|---|---|
| optional | Array< SnappedPoint > | An array of snapped points. See SnappedPoint for more information. |
| optional | string | A string containing a user-visible warning. |
SnappedPoint
Field | Required | Type | Description |
---|---|---|---|
| required | LatitudeLongitudeLiteral | See LatitudeLongitudeLiteral for more information. |
| required | string | A unique identifier for a place. All place IDs returned by the Roads API correspond to road segments. |
| optional | number |
An integer that indicates the corresponding value in the original
request. Each value in the request should map to a snapped value in
the response. However, if you've set interpolate=true or if you're
using nearest roads, then it's possible that the response will
contain more coordinates than the request. Interpolated values will
not have an |
LatitudeLongitudeLiteral
An object describing a specific location with Latitude and Longitude in decimal degrees.
Field | Required | Type | Description |
---|---|---|---|
| required | number | Latitude in decimal degrees |
| required | number | Longitude in decimal degrees |
نسخه ی نمایشی
- برای ایجاد یک مسیر وسیله نقلیه، روی نقشه کلیک کنید. توجه داشته باشید که اگر نقاط شما خیلی از هم فاصله داشته باشند، ممکن است به درستی جابجا نشوند.
- دوبار کلیک کنید تا مسیر خود را به جاده بکشید.
این مثال را تمام صفحه مشاهده کنید.
جاوا اسکریپت
var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize);
جاوا اسکریپت + HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Roads API Demo</title> <style> html, body, #map { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #bar { width: 240px; background-color: rgba(255, 255, 255, 0.75); margin: 8px; padding: 4px; border-radius: 4px; } #autoc { width: 100%; box-sizing: border-box; } </style> <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places&key=YOUR_API_KEY"></script> <script> var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize); </script> </head> <body> <div id="map"></div> <div id="bar"> <p class="auto"><input type="text" id="autoc"/></p> <p><a id="clear" href="#">Click here</a> to clear map.</p> </div> </body> </html>
Roads API تا 100 نقطه GPS جمعآوریشده در طول مسیر را میگیرد و مجموعهای از دادههای مشابه را با نقاطی که به محتملترین جادههایی که وسیله نقلیه در آن حرکت میکرده جمعآوری میکند. به صورت اختیاری، می توانید درخواست کنید که نقاط درون یابی شوند و در نتیجه مسیری ایجاد شود که به آرامی از هندسه جاده پیروی می کند.
درخواست ها
درخواست snap to road باید از طریق HTTPS ارسال شود و به شکل زیر باشد:
https://roads.googleapis.com/v1/snapToRoads?parameters&key=YOUR_API_KEY
Required parameters
path
The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|". For example:
path=60.170880,24.942795|60.170879,24.942796|60.170877,24.942796
.Note: The snapping algorithm works best for points that are not too far apart. If you observe odd snapping behavior, try creating paths that have points closer together. To ensure the best snap-to-road quality, you should aim to provide paths on which consecutive pairs of points are within 300m of each other. This will also help in handling any isolated, long jumps between consecutive points caused by GPS signal loss, or noise.
Optional parameters
interpolate
Whether to interpolate a path to include all points forming the full road-geometry. When true, additional interpolated points will also be returned, resulting in a path that smoothly follows the geometry of the road, even around corners and through tunnels. Interpolated paths will most likely contain more points than the original path. Defaults to
false
.
نمونه ها
درخواست زیر نقاط مشخص شده را به هندسه جاده میچسباند. این مجموعه خاص از داده ها یک جاده دایره ای را دنبال می کند. setting interpolate=true
اطمینان حاصل کنید که هندسه برگشتی با انحنای جاده مطابقت دارد. با interpolate=false
، مسیر قطع شده همچنان جاده را دنبال میکند، اما چندخط حاصل به آن هموار نخواهد بود.
URL
https://roads.googleapis.com/v1/snapToRoads ?interpolate=true &path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836 &key=YOUR_API_KEY
CURL
curl -L -X GET 'https://roads.googleapis.com/v1/snapToRoads?path=-35.27801%2C149.12958%7C-35.28032%2C149.12907%7C-35.28099%2C149.12929%7C-35.28144%2C149.12984%7C-35.28194%2C149.13003%7C-35.28282%2C149.12956%7C-35.28302%2C149.12881%7C-35.28473%2C149.12836&interpolate=true&key=YOUR_API_KEY'
پاسخ ها
برای هر درخواست معتبر، Roads API پاسخی را در قالب نشان داده شده در URL درخواست، مانند پاسخ JSON زیر، برمیگرداند.
{ "snappedPoints": [ { "location": { "latitude": -35.27800489993019, "longitude": 149.129531998742 }, "originalIndex": 0, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJr_xl0GdNFmsRsUtUbW7qABM", }, { "location": { "latitude": -35.2784195, "longitude": 149.12946589999999 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJ6aXGemhNFmsRZE_zHqhmrG4", }, { "location": { "latitude": -35.2792731, "longitude": 149.12933809999998 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJTcTdZ2hNFmsRXokM4mWCWfk", }, { "location": { "latitude": -35.279557, "longitude": 149.1292973 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.279610999999996, "longitude": 149.1292889 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJiUfNQmhNFmsRSsAI-1m6y1g", }, { "location": { "latitude": -35.2796484, "longitude": 149.1292791 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJ_RyFQ2hNFmsRoHJAbW7qABM", }, { "location": { "latitude": -35.279947299999996, "longitude": 149.1291894 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.280323564795005, "longitude": 149.1290903128365 }, "originalIndex": 1, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJOyypT2hNFmsRZBtscGL0htw", }, { "location": { "latitude": -35.2803426, "longitude": 149.12908529999999 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280409899999995, "longitude": 149.1290699 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.28048179999999, "longitude": 149.129062 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.2805541, "longitude": 149.1290623 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJr8xRTGhNFmsRzMb-rxgjspc", }, { "location": { "latitude": -35.280626, "longitude": 149.1290712 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280695099999996, "longitude": 149.12908489999998 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2807629, "longitude": 149.1291046 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2808294, "longitude": 149.1291306 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2809064, "longitude": 149.1291693 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.280968200000004, "longitude": 149.129208 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28101395754623, "longitude": 149.1292430025548 }, "originalIndex": 2, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.28103840000001, "longitude": 149.1292617 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810936, "longitude": 149.1293121 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJv5r0smlNFmsR5nunau79Fv4", }, { "location": { "latitude": -35.2810979, "longitude": 149.1293176 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJpYMSrmlNFmsRXkCoIkZxgBg", }, { "location": { "latitude": -35.281152399999996, "longitude": 149.1294256 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2811784, "longitude": 149.1294706 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812258, "longitude": 149.1295413 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2812771, "longitude": 149.12960759999999 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281332, "longitude": 149.1296695 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2813904, "longitude": 149.12972670000002 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281451700000005, "longitude": 149.1297788 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28146506991143, "longitude": 149.12978858234607 }, "originalIndex": 3, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28151580000001, "longitude": 149.1298257 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28158259999999, "longitude": 149.129867 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281666099999995, "longitude": 149.1299091 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2817377, "longitude": 149.1299379 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281810899999996, "longitude": 149.1299602 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281884999999996, "longitude": 149.1299765 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.28194399606459, "longitude": 149.1299842294294 }, "originalIndex": 4, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.281959799999996, "longitude": 149.12998629999998 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282035199999996, "longitude": 149.1299895 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2821254, "longitude": 149.1299851 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.282199999999996, "longitude": 149.1299743 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2822739, "longitude": 149.1299573 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2823468, "longitude": 149.129934 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824178, "longitude": 149.1299043 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJ601MoWlNFmsR5mvkfPp2ovA", }, { "location": { "latitude": -35.2824379, "longitude": 149.1298945 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.282472999999996, "longitude": 149.1298835 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.2825375, "longitude": 149.1298525 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJe9LPnWlNFmsR7mJw8mYHwG0", }, { "location": { "latitude": -35.28257309999999, "longitude": 149.1298319 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282665400000006, "longitude": 149.12974459999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28274030000001, "longitude": 149.1296645 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282809799999995, "longitude": 149.12957799999998 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.28282136229385, "longitude": 149.12956142620385 }, "originalIndex": 5, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2828744, "longitude": 149.1294854 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282922299999996, "longitude": 149.1294044 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.282931500000004, "longitude": 149.1293876 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJaUpThGlNFmsRMHWxoH7EOsc", }, { "location": { "latitude": -35.2830263, "longitude": 149.1291788 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.283054, "longitude": 149.1290996 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJyd3JiWlNFmsR9RUq2ySTTZQ", }, { "location": { "latitude": -35.2830794, "longitude": 149.1290094 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28313383700836, "longitude": 149.12893500604946 }, "originalIndex": 6, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283134499999996, "longitude": 149.12893409999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283190399999995, "longitude": 149.1288668 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2832503, "longitude": 149.1288041 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833133, "longitude": 149.1287463 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2833794, "longitude": 149.128694 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283448299999996, "longitude": 149.128647 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835199, "longitude": 149.1286054 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2835934, "longitude": 149.1285699 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.283668899999995, "longitude": 149.12854059999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28372649999999, "longitude": 149.1285237 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.28386179999999, "longitude": 149.12849319999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2839978, "longitude": 149.1284682 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJWSb8ImpNFmsRp_4JAxJFE1A", }, { "location": { "latitude": -35.2840205, "longitude": 149.12846779999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2840524, "longitude": 149.12845969999998 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.284341500000004, "longitude": 149.1284124 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJZe8tFWpNFmsR4brZ1vldk2E", }, { "location": { "latitude": -35.2843875, "longitude": 149.1284034 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJVx7Ta2pNFmsRx9OI9CnN5tI", }, { "location": { "latitude": -35.2845916, "longitude": 149.1283726 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.28459730000001, "longitude": 149.1283703 }, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, { "location": { "latitude": -35.284728747199374, "longitude": 149.12834860726772 }, "originalIndex": 7, "placeId": "ChIJtWxAZmpNFmsRlbUCkc6VtnA", }, ], }
پاسخ از طرح زیر استفاده می کند.
SnapToRoadsResponse
Field | Required | Type | Description |
---|---|---|---|
| optional | Array< SnappedPoint > | An array of snapped points. See SnappedPoint for more information. |
| optional | string | A string containing a user-visible warning. |
SnappedPoint
Field | Required | Type | Description |
---|---|---|---|
| required | LatitudeLongitudeLiteral | See LatitudeLongitudeLiteral for more information. |
| required | string | A unique identifier for a place. All place IDs returned by the Roads API correspond to road segments. |
| optional | number |
An integer that indicates the corresponding value in the original
request. Each value in the request should map to a snapped value in
the response. However, if you've set interpolate=true or if you're
using nearest roads, then it's possible that the response will
contain more coordinates than the request. Interpolated values will
not have an |
LatitudeLongitudeLiteral
An object describing a specific location with Latitude and Longitude in decimal degrees.
Field | Required | Type | Description |
---|---|---|---|
| required | number | Latitude in decimal degrees |
| required | number | Longitude in decimal degrees |
نسخه ی نمایشی
- برای ایجاد یک مسیر وسیله نقلیه، روی نقشه کلیک کنید. توجه داشته باشید که اگر نقاط شما خیلی از هم فاصله داشته باشند، ممکن است به درستی جابجا نشوند.
- دوبار کلیک کنید تا مسیر خود را به جاده بکشید.
این مثال را تمام صفحه مشاهده کنید.
جاوا اسکریپت
var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize);
جاوا اسکریپت + HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Roads API Demo</title> <style> html, body, #map { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #bar { width: 240px; background-color: rgba(255, 255, 255, 0.75); margin: 8px; padding: 4px; border-radius: 4px; } #autoc { width: 100%; box-sizing: border-box; } </style> <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places&key=YOUR_API_KEY"></script> <script> var apiKey = 'YOUR_API_KEY_HERE'; var map; var drawingManager; var placeIdArray = []; var polylines = []; var snappedCoordinates = []; function initialize() { var mapOptions = { zoom: 17, center: {lat: -33.8667, lng: 151.1955,} }; map = new google.maps.Map(document.getElementById('map'), mapOptions); // Adds a Places search box. Searching for a place will center the map on that // location. map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar')); var autocomplete = new google.maps.places.Autocomplete( document.getElementById('autoc')); autocomplete.bindTo('bounds', map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } }); // Enables the polyline drawing control. Click on the map to start drawing a // polyline. Each click will add a new vertice. Double-click to stop drawing. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYLINE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYLINE ] }, polylineOptions: { strokeColor: '#696969', strokeWeight: 2, strokeOpacity: 0.3, } }); drawingManager.setMap(map); // Snap-to-road when the polyline is completed. drawingManager.addListener('polylinecomplete', function(poly) { var path = poly.getPath(); polylines.push(poly); placeIdArray = []; runSnapToRoad(path); }); // Clear button. Click to remove all polylines. document.getElementById('clear').addEventListener('click', function(event) { event.preventDefault(); for (var i = 0; i < polylines.length; ++i) { polylines[i].setMap(null); } polylines = []; return false; }); } // Snap a user-created polyline to roads and draw the snapped path function runSnapToRoad(path) { var pathValues = []; for (var i = 0; i < path.getLength(); i++) { pathValues.push(path.getAt(i).toUrlValue()); } $.get('https://roads.googleapis.com/v1/snapToRoads', { interpolate: true, key: apiKey, path: pathValues.join('|') }, function(data) { processSnapToRoadResponse(data); drawSnappedPolyline(); }); } // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } } // Draws the snapped polyline (after processing snap-to-road response). function drawSnappedPolyline() { var snappedPolyline = new google.maps.Polyline({ path: snappedCoordinates, strokeColor: '#add8e6', strokeWeight: 4, strokeOpacity: 0.9, }); snappedPolyline.setMap(map); polylines.push(snappedPolyline); } $(window).load(initialize); </script> </head> <body> <div id="map"></div> <div id="bar"> <p class="auto"><input type="text" id="autoc"/></p> <p><a id="clear" href="#">Click here</a> to clear map.</p> </div> </body> </html>