Google Maps API v3 – wyznaczanie trasy / markery

Wyznaczanie i rysowanie trasy pomiędzy punktami na mapie jest dość proste. Wystarczy kod typu:

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(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

i na mapce pokazuje się trasa z markerami na początku i na końcu.

Gdyby jednak z jakiegoś powodu domyślne markery przeszkadzały, to można pokusić się o narysowanie trasy po swojemu:

var trasa ;

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(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     if( trasa != null ) trasa.setMap(null) ;
     polylineOptions = {
                 map: map,
                 strokeColor: "#FF0000",
                 strokeOpacity: 0.7,
                 strokeWeight: 5,
                 path: result.routes[0].overview_path,
              }
     trasa = new google.maps.Polyline(polylineOptions);
     map.fitBounds(result.routes[0].bounds);
    }
  });
}

Dodatkowa zmienna trasa pozwala zapamiętać wygenerowaną krzywą (dzięki czemu łatwo jest pozbyć się jej w razie potrzeby). Path w polylineoptions zawiera współrzędne kolejnych punktów na trasie zapisanej w response.routes[0].overview_path. Na koniec ustawiamy mapę tak, żeby pokazywała całą trasę (map.fitBounds()).

Sama funkcja fitBounds() przyda się także do pokazania w całości grupy markerów rozrzuconych po fragmencie mapy. Zamiast dobierać powiększenie można wyliczyć skrajne położenia (min_lat, min_long, max_lat, max_long) i na ich podstawie określić obszar pokazywany na mapie:

  var p1 = new google.maps.LatLng(min_lat,min_long);
  var p2 = new google.maps.LatLng(max_lat,max_long);
  var bounds = new google.maps.LatLngBounds(p1,p2);
  map.fitBounds(bounds);

Na mapie zostanie pokazany obszar zawierający wszystkie markery brane pod uwagę. Można dodatkowo przesunąć punkty p1 i p2 tak, aby zrobić „marginesy” po bokach.

• Tweet
• Pin It