(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
18. 10. 2013. | #1 |
profesionalac
Professional
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
|
kod
Probao sam i ovako (objasnjenje stoji u kodu):
Kôd:
var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var poligon; var tacke; var primer; var rezultat; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); //tacke = response.routes[0].overview_path; //primer = [[{"X":72,"Y":59.45},{"X":136,"Y":66},{"X":170,"Y":99},{"X":171,"Y":114},{"X":183,"Y":125},{"X":218,"Y":144},{"X":218,"Y":165},{"X":226,"Y":193},{"X":254,"Y":195},{"X":283,"Y":195},{"X":292,"Y":202},{"X":325,"Y":213},{"X":341,"Y":234},{"X":397,"Y":245},{"X":417,"Y":248}]]; //ovde transformisem tacke iz directons-a u format citljiv JSclliper biblioteci var overviewPath = response.routes[0].overview_path, overviewPathGeo = []; for(var i = 0; i < overviewPath.length; i++) { overviewPathGeo.push( [overviewPath[i].lng(), overviewPath[i].lat()] ); } //kreiram varijablu koja ce vratiti tacke za crtanje poligona var svg=draw(overviewPathGeo); //kod za crtanje poligona poligon = new google.maps.Polygon({ paths: svg, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); //crtam poligon poligon.setMap(map); } }); } google.maps.event.addDomListener(window, 'load', initialize); //funcija sa argumentom u - ustavri su tacke koje daje directions servis function draw(u) { var polygons = u; var scale = 100; reverse_copy(polygons); polygons = scaleup(polygons, scale); var cpr = new ClipperLib.Clipper(); var delta = 25; var joinType = ClipperLib.JoinType.jtRound; var miterLimit = 2; var AutoFix = true; var svg, offsetted_polygon, cont = document.getElementById('map-canvas'); offsetted_polygon = cpr.OffsetPolygons(polygons, delta * scale, joinType, miterLimit, AutoFix); console.log(JSON.stringify(offsetted_polygon)); svg = polys2path(offsetted_polygon, scale); rezultat = polys2path(offsetted_polygon, scale); return svg; } // helper function to scale up polygon coordinates function scaleup(poly, scale) { var i, j; if (!scale) scale = 1; for(i = 0; i < poly.length; i++) { for(j = 0; j < poly[i].length; j++) { poly[i][j].X *= scale; poly[i][j].Y *= scale; } } return poly; } // converts polygons to SVG path string function polys2path (poly, scale) { var path = "", i, j; if (!scale) scale = 1; for(i = 0; i < poly.length; i++) { for(j = 0; j < poly[i].length; j++){ if (!j) path += "M"; else path += "L"; path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale); } path += "Z"; } return path; } function reverse_copy(poly) { // Make reverse copy of polygons = convert polyline to a 'flat' polygon ... var k, klen = poly.length, len, j; for (k = 0; k < klen; k++) { len = poly[k].length; poly[k].length = len * 2 - 2; for (j = 1; j <= len - 2; j++) { poly[k][len - 1 + j] = { X: poly[k][len - 1 - j].X, Y: poly[k][len - 1 - j].Y } } } } </script> |
|
|