Javascript Girl
  1. Javascript Girl
  3. Google api v3 montre les marqueurs proches sur la route du client
Intereting Posts
JQuery / Dojo – Comment puis-je utiliser jQuery avec Dojo toolkit Calcul du côté du serveur à l'aide de Firebase Empêcher l'événement par défaut dans onclick Quelle est la différence entre cette fonction et le prototype.function? En utilisant plusieurs instructions de retour en JavaScript Vérifiez les codes d'état HTTP d'image en utilisant jQuery / JS? Knockoutjs – liens multiples lors d'un événement de clic Expressions régulières du sélecteur jQuery JavaScript – Avantages de l'objet littéraire Comment puis-je retourner une vue d'un appel ajax dans Laravel 5 Comment puis-je créer un tableau de bits en version javascript? Comment appeler GWT java fonction à partir de Javascript? Comment puis-je supprimer la chaîne de requête de l'url après la chargement de la page? JS Regex trouve plusieurs marques Javascript regexp supprime tous les caractères spéciaux

Google api v3 montre les marqueurs proches sur la route du client

Comment puis-je afficher uniquement les marqueurs (ils sont prédéfinis, mais cachés pour toute la carte), qui sont à proximité (peut-être par rayon de 10miles ou 20 milles) à la route que j'ai choisie en utilisant Google api v3, par exemple, j'utilise le service Directions

HTML: 

<div id="panel"> <b>start: </b> <input type="text" id="start" name="start" maxlength="30" onchange="calcRoute();" /> <b>end: </b> <input type="text" id="end" name="end" maxlength="30" onchange="calcRoute();" /> </div> <div id="map"></div>

JavaScript: 

 var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.891224, -87.638675); var mapOptions = { zoom:7, center: chicago } map = new google.maps.Map(document.getElementById('map'), mapOptions); directionsDisplay.setMap(map); /* === markers === */ var locations = [ ['1', 40.577651, -82.200443], ['2', 40.760976, -93.911868], ['3', 39.110017, -111.116458], ['4', 27.036116, -81.717045], ['5', 34.104058, -117.444583], ['6', 44.790790, -121.443607], ]; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ map: map, title: locations[i][0], position: new google.maps.LatLng(locations[i][1], locations[i][2]), //visible: false, //true for all, but hidden icon:'img/the_icon.png' }); } } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', initialize);

Vous avez 2 marqueurs dans les 20 milles d'une route de NY à LA:

Exemple de violon à l'aide de RouteBoxer 

 function calcRoute() { // Clear any previous route boxes from the map clearBoxes(); // Convert the distance to box around the route from miles to km distance = 20 * 1.609344; var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); // Box around the overview path of the first route var path = response.routes[0].overview_path; var boxes = routeBoxer.box(path, distance); drawBoxes(boxes); } else alert("Directions request failed: " + status); }); } // Draw the array of boxes as polylines on the map function drawBoxes(boxes) { boxpolys = new Array(boxes.length); for (var i = 0; i < boxes.length; i++) { boxpolys[i] = new google.maps.Rectangle({ bounds: boxes[i], fillOpacity: 0, strokeOpacity: 1.0, strokeColor: '#000000', strokeWeight: 1, map: map }); for (var j=0; j< gmarkers.length; j++) { if (boxes[i].contains(gmarkers[j].getPosition())) gmarkers[j].setMap(map); } } }

Exemple en utilisant JSTS (à partir de cette question: comment dessiner un polygone autour d'une polyligne en JavaScript?. Utilise google.maps.geometry.poly.containsLocation

code: 

 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); var overviewPath = response.routes[0].overview_path, overviewPathGeo = []; for (var i = 0; i < overviewPath.length; i++) { overviewPathGeo.push( [overviewPath[i].lng(), overviewPath[i].lat()]); } var distance = 10 / 111.12, // Roughly 10km geoInput = { type: "LineString", coordinates: overviewPathGeo }; var geoInput = googleMaps2JTS(overviewPath); var geometryFactory = new jsts.geom.GeometryFactory(); var shell = geometryFactory.createLineString(geoInput); var polygon = shell.buffer(distance); var oLanLng = []; var oCoordinates; oCoordinates = polygon.shell.points[0]; for (i = 0; i < oCoordinates.length; i++) { var oItem; oItem = oCoordinates[i]; oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0])); } if (routePolygon && routePolygon.setMap) routePolygon.setMap(null); routePolygon = new google.maps.Polygon({ paths: jsts2googleMaps(polygon), map: map }); for (var j=0; j< gmarkers.length; j++) { if (google.maps.geometry.poly.containsLocation(gmarkers[j].getPosition(),routePolygon)) { gmarkers[j].setMap(map); } else { gmarkers[j].setMap(null); } } } }); }