Google MAP API, Determine if a route passes by a polygon -
i have map shows 3 polygons , route passes cross them. each polygone has title property. display polygone title when route passes it.
this code did :
<!doctype html><html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge,chrome=1" http-equiv="x-ua-compatible"> <title>loading / editing zones</title> <style> #map, html, body { padding: 0; margin: 0; height: 100%; } #panel { width: 200px; font-family: arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #delete-button { margin-top: 5px; } #login_close{ display: none; } .labels { color: red; background-color: white; font-family: "lucida grande", "arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 65px; border: 2px solid black; white-space: nowrap; } .autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #f0f0f0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399ff; } </style> </head> <body> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry" type="text/javascript"></script> <script type="text/javascript"> var directionsdisplay = new google.maps.directionsrenderer(), directionsservice = new google.maps.directionsservice(), polys = new array(), map = null, zoom = 10, mypolygons = [ { "name": "zone1", "coordinates": [ "51.44459,-0.21835", "51.46256,-0.11261", "51.43004,0.03708", "51.40777,-0.09888", "51.39064,-0.21149", "51.40692,-0.27191" ] }, { "name": "zone2", "coordinates": [ "51.56683,-0.22934", "51.54292,-0.13046", "51.57195,0", "51.59755,-0.03708", "51.5984,-0.13733", "51.59755,-0.19913" ] }, { "name": "zone3", "coordinates": [ "51.66148,-0.13733", "51.61461,-0.08514", "51.61887,0.02197", "51.65381,0.05905", "51.64359,-0.04807" ] } ]; function drawpolygon(poly, polylabel) { var options = { paths: poly, strokecolor: '#aa2143', strokeopacity: 1, strokeweight: 2, fillcolor: "#ff6600", fillopacity: 0.7, polytitle: polylabel }; newpoly = new google.maps.polygon(options); newpoly.setmap(map); polys.push(newpoly); } function sendpolygonfordrawing() { for(var =0; i<mypolygons.length; i++){ poly = new array(); var coord = mypolygons[i].coordinates; var lng = coord.length; for(var j=0; j<lng; j++){ var longit_latid = coord[j].split(','); poly.push(new google.maps.latlng(parsefloat(longit_latid[0]), parsefloat(longit_latid[1]))); } drawpolygon(poly, mypolygons[i].name); poly.pop(); } } //route function calcroute() { var start = "croydon"; var end = "cheshunt"; var waypts = []; var waysarray = ["london"]; (var = 0; < waysarray.length; i++) { waypts.push({ location:waysarray[i], stopover:true}); } var request = { origin: start, destination: end, waypoints: waypts, optimizewaypoints: true, travelmode: google.maps.travelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); var routcoordinates = fncroutezoneintersection(response);//this function populates routcoordinates json data of route. var exist = new array(); for(var i=0; i<polys.length; i++){//polys holds polygons objects. for(var j=0; j<routcoordinates.length; j++){ if(google.maps.geometry.poly.containslocation(new google.maps.latlng(routcoordinates[j].k, routcoordinates[j].a), polys[i]) == true){ exist .push(polys.polytitle); break; /*this breaks loop checking when point found inside polygon , go check next one, because knowing 1 point of route inside polygon enough*/ } } } console.log(exist); alert(exist); } }); directionsdisplay.setmap(map); } function fncroutezoneintersection(response){ var myroute = response.routes[0].legs[0]; var lnglatcordinates = new array(); (var = 0; < myroute.steps.length; i++) { lnglatcordinates.push(myroute.steps[i].start_point); } return lnglatcordinates; } $(function() { //basic var cartodbmapoptions = { zoom: zoom, center: new google.maps.latlng(51.465872, -0.065918), disabledefaultui: false, maptypeid: google.maps.maptypeid.roadmap } // init map map = new google.maps.map(document.getelementbyid("map"),cartodbmapoptions); sendpolygonfordrawing(); calcroute(); var drawingmanager = new google.maps.drawing.drawingmanager({ drawingcontrol: false, polygonoptions: { fillcolor: '#0099ff', fillopacity: 0.7, strokecolor: '#aa2143', strokeweight: 2, clickable: true, zindex: 1, editable: true } }); }); </script> <div id="map"> </div> </body> </html> sounds code starting line : var routcoordinates = fncroutezoneintersection(response);............ checking starting, waypoint , end of route against polygons , not route points why empty array when doing check.
can 1 me please?
you have use overview_path instead of route legs. see docs overview_path contains array of latlngs represent approximate (smoothed) path of resulting directions.
function fncroutezoneintersection(response) { console.log('fncroutezoneintersection...'); // var myroute = response.routes[0].legs[0]; var myroute = response.routes[0].overview_path; var lnglatcordinates = new array(); // (var = 0; < myroute.steps.length; i++) { (var = 0; < myroute.length; i++) { // lnglatcordinates.push(myroute.steps[i].start_point); lnglatcordinates.push(myroute[i]); } // console.log(lnglatcordinates); return lnglatcordinates; } and have change:
exist.push(polys.polytitle); to
exist.push(polys[i].polytitle); see example @ jsbin markers. list of polygon titles written console.log.
Comments
Post a Comment