Parcourez les rues dans Google Maps

Question

J'ai une coordonnée et j'ai besoin d'obtenir le nom des rues qui se trouvent entre ce point. Par exemple, j'obtiens le point "Manuela Pedraza 3050" (ou géolocalisation, peu importe) et j'ai besoin de récupérer les valeurs "Zapiola" et "Conesa".

Est-ce possible?

Answer 1

Concept:

1. créer un cercle de 8 (comme un nombre arbitraire) de points à 100 mètres de votre point d'intérêt.
2. obtenir les directions à partir de votre point d'intérêt à chacun de ces points (vous aurez probablement besoin d'utiliser les directions de marche dans ce domaine car les rues sont à sens unique).
3. analyser les résultats pour les 2 rues transversales les plus proches

Notez que l'analyse ci-dessous dépend du texte dans le instructions retourné par le service des directions. Comme écrit cela ne fonctionnera que pour l'anglais et pas nécessairement partout. Cela dit, il semble actuellement fonctionner pour votre domaine d'intérêt ainsi que Palo Alto CA et New York NY.

demo fiddle

extrait de code:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var pointOfInterest = new google.maps.LatLng(-34.5548, -58.4720282); 
 
    // var pointOfInterest = new google.maps.LatLng(37.439913,-122.141229); 
 
    // var pointOfInterest = new google.maps.LatLng(40.715898,-74.006843); 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: pointOfInterest, 
 
     zoom: 18, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: pointOfInterest, 
 
    map: map 
 
    }) 
 
    geocoder = new google.maps.Geocoder(); 
 
    var circlePts = drawCircle(pointOfInterest, 100, 1); 
 
    var maneuverArray = []; 
 
    var results = 0; 
 
    for (var i = 0; i < circlePts.length; i++) { 
 
    var mark = new google.maps.Marker({ 
 
     position: circlePts[i], 
 
     map: map, 
 
     icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(3.5, 3.5) 
 
     } 
 
    }); 
 
    var ds = new google.maps.DirectionsService(); 
 
    var request = { 
 
     origin: pointOfInterest, 
 
     destination: circlePts[i], 
 
     travelMode: google.maps.TravelMode.WALKING 
 
    } 
 
    ds.route(request, function(result, status) { 
 
     results++; 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     var dr = new google.maps.DirectionsRenderer({ 
 
      map: map, 
 
      preserveViewport: true 
 
     }); 
 
     dr.setDirections(result); 
 
     var distance = 0; 
 
     for (var j = 0; j < result.routes[0].legs.length; j++) { 
 
      for (var k = 0; k < result.routes[0].legs[j].steps.length; k++) { 
 
      if (result.routes[0].legs[j].steps[k].distance.value) { 
 
       distance += result.routes[0].legs[j].steps[k].distance.value; 
 
      } 
 
      console.log("leg:" + j + " step:" + k + " dist=" + distance + " manuever:" + result.routes[0].legs[j].steps[k].maneuver); 
 
      maneuverArray.push({ 
 
       manuever: result.routes[0].legs[j].steps[k].maneuver, 
 
       distance: distance, 
 
       step: result.routes[0].legs[j].steps[k] 
 
      }); 
 
      } 
 
     } 
 
     } else { 
 
     alert("directions request failed:" + status); 
 
     } 
 
     if (results == circlePts.length) { 
 
     analyzeResults(maneuverArray); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
function analyzeResults(maneuverArray) { 
 
    maneuverArray.sort(function(a, b) { 
 
    return (a.distance - b.distance) 
 
    }); 
 
    var crossStreet = []; 
 
    for (var i = 0; i < maneuverArray.length; i++) { 
 
    if (maneuverArray[i].maneuver != "") { 
 
     crossStreet.push(maneuverArray[i].step); 
 
    } 
 
    } 
 
    // only unique points 
 
    var uniqueXstreets = []; 
 

 
    for (var i = 0; i < crossStreet.length; i++) { 
 
    var j = 0; 
 
    for (; j < uniqueXstreets.length; j++) { 
 
     if (google.maps.geometry.spherical.computeDistanceBetween(crossStreet[i].end_location, uniqueXstreets[j].end_location) < 1) break; 
 
     uniqueXstreets.push(maneuverArray[i].step); 
 
     var mark = new google.maps.Marker({ 
 
     map: map, 
 
     position: maneuverArray[i].step.end_location, 
 
     title: "xstreet " + i + " " + maneuverArray[i].step.maneuver 
 
     }); 
 
    } 
 
    if (j == uniqueXstreets.length) { 
 
     uniqueXstreets.push(maneuverArray[i].step); 
 
     var mark = new google.maps.Marker({ 
 
     map: map, 
 
     position: maneuverArray[i].step.end_location, 
 
     title: "xstreet " + i 
 
     }); 
 
    } 
 
    if (uniqueXstreets.length == 2) break; 
 
    } 
 
    for (var i = 0; i < uniqueXstreets.length; i++) { 
 
    // document.getElementById('maneuver').innerHTML += uniqueXstreets[i].instructions + "<br>"; 
 
    xStreet = uniqueXstreets[i].instructions.substr(uniqueXstreets[i].instructions.indexOf("toward") + "toward".length + 1); 
 
    document.getElementById('maneuver').innerHTML += xStreet + "<br>"; 
 
    console.log("[" + i + "]:" + uniqueXstreets[i].end_location.toUrlValue(6)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function drawCircle(point, radius, dir) { 
 
    var d2r = Math.PI/180; // degrees to radians 
 
    var r2d = 180/Math.PI; // radians to degrees 
 
    var earthsradius = 6.371e6; // 6.371e6 is the radius of the earth in meters 
 

 
    var points = 8; 
 

 
    // find the raidus in lat/lon 
 
    var rlat = (radius/earthsradius) * r2d; 
 
    var rlng = rlat/Math.cos(point.lat() * d2r); 
 

 

 
    var extp = new Array(); 
 
    if (dir == 1) { 
 
    var start = 0; 
 
    var end = points + 1 
 
    } // one extra here makes sure we connect the 
 
    else { 
 
    var start = points + 1; 
 
    var end = 0 
 
    } 
 
    for (var i = start; 
 
    (dir == 1 ? i < end : i > end); i = i + dir) { 
 
    var theta = Math.PI * (i/(points/2)); 
 
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
 
    extp.push(new google.maps.LatLng(ex, ey)); 
 
    } 
 
    return extp; 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<h3>Cross Streets</h3> 
 
<div id="maneuver"></div> 
 
<div id="crossStreets"></div> 
 
<div id="map_canvas"></div>