Google api v3在客户道路上显示附近的标记
我怎样才能显示标记（它们是预定义的，但是对于整个地图是隐藏的），这些标记位于我使用Google api v3选择的道路附近（可能是半径10英里或20英里）， 例如我使用路线服务
HTML：
start: end: 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);
从NY到LA的路线20英里范围内有2个标记：
使用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); } } }
使用JSTS的示例 （来自这个问题： 如何在JavaScript中围绕折线绘制多边形？ 。使用google.maps.geometry.poly.containsLocation
码：
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); } } } }); }