Google에서 Polyline을 그리는 방법 Directions Api

Question

Google Directions API가 반환하는 것으로부터 polyline을 그려야합니다. API에는이 필드가 있습니다. overview_polyline이 필드에는 전체 폴리 라인이 포함되어 있다고 가정하고 있습니다. 거기에서 폴리 라인을 그리는 것이 좋을까요? Google의 JSON에있는 내용입니다.

{ 
    geocoded_waypoints: [ 
     {}, 
     {} 
    ], 
    routes: [ 
     { 
      bounds: {}, 
      copyrights: "Dados do mapa ©2017 Google, Inst. Geogr. Nacional", 
      legs: [], 
      overview_polyline: { 
       points: "cxwnFtdct@dAQlAf@fAf@|Aq@l@]pCcFhCjA|LfJlAT~@IpDi@jAb@f@HXi@t@kBhBeBx@Qz@z@dClHzFpW`H|RvTpj@`AxAdBdAnAXhB?fBk@rAcAnG_HhCgAjAKrATbA`Al@lBHnAc@rFgBhIkCxMBfIlBvHnBtCnB|AnEdCrJxFj@fB@h@OhAgCtHGfCl@jAlA\jE]tDBzBb@tLxFtK~E`d@hShIzEtDhDxDrEfDpFlFjNvDtRdDjThF`TzH`QhEhG|EvFhL`JpJtE|LpEdOpFjOzGlPfJlHzE~NjLfQvPfP|RtHrKxDjGfI|NdHbOvGjPfCbHpCtIvJh_@vG|[|CtNvFvSvE~MfI|QzLbTfNxQbKlKrRzP|NnNvNlQjIzMnLfV`T|h@nDbHhIdMxFjH~JrMnEfHzIrQfHvOtEjI|MnQfNzP`FzI~EnLrKp[nDlHvErHzL~MbRbM`EjCjFxEtRnX|D~EjIhI~WrRxGlGdFnG`JjNxHzKfTxVfKfRfMbRlErHtBlFxIjYvHnPpBtFxF~WpCjHjGhJfDzClF~CnDlArDl@pC\vHXvX[lOaB|GcBdFqBxQwJbDmAxE_ApJ_@jEXtItBrQ~EbQbDlUfBpMfA|IxCbF`DhGlGnJjKtJrF`SpFbRnDdUxAbGrAlEjBnFpDtNnMfGlE~[lTbRdQjTpUxH`GjHfEnGlC`O|DrUxEnEzAfFrBnSpIjPnDxSlAf\lAl~@hDzRrAjOpBvKrBrQtEv^pM``@rPrR|JxSdMlGnGfGtH~HxFdFlBtGfApGp@bG|AnHxD|FzFrH`L~FvH|HrFrFtBtFjA~Mt@pHR|FhA`IfDpEbDzFxGrHrKhEtErF`EnS`MzMvItSdUfF~DtE~B|SrInEnBzDtCxN`QpQfVtQ~Yjn@~fAnK`RvLlRzEjF|GlFrc@vUfRjKfIvGxDhEjIxKdN~T`L~MrFvE~LhIlp@fb@xCtBzFtFbEzFbDrGhH`TfF|JnGfHzEdD|UdIpTdHtKtFj]nUrEzC~[pTfLfG|EbB~KfCnTvDpmAxSzs@~LhOfDzOdFfOxGdY`O`k@zYnVzMlK|HrFjFbXj[rCbCvDfB|FfBbD^xRBlb@nBrIdArJvDfD|B|FzFvFzHnCbIDrCk@dA_A_@q@mHz@sAvAJ^f@r@n@x@UR_@fBGjET`S~@ro@pCpXpAfFp@dEhCnGtE@HXl@n@H^W|ASpShAbZxAtPp@~SjAzGZKdDStBd@x@dC@nEVz@HtAp@b@\OZ|AbBxDnFJf@" 
      }, 
      summary: "A1", 
      warnings: [ ], 
      waypoint_order: [ ] 
     } 
    ], 
    status: "OK" 
} 

어떻게 그 값으로 그릴 수 있습니까?

Answer 1

@alb 먼저 JSON에서 long, long을 구문 분석해야합니다. 당신은이 링크를 볼 수 있습니다 https://developers.google.com/maps/documentation/directions/

는 그런 다음 위도 가야를 긴 값 &은> 목록 <에 넣어. 당신이지도를 그리기 폴리 라인에 대한 코드 아래 사용할 수 있습니다 그 후

: 이미 아래 링크에 비슷한 질문에 대답했다

PolylineOptions options = new PolylineOptions().width(5).color(Color.BLUE).geodesic(true); 
for (int z = 0; z < list.size(); z++) { 
    LatLng point = list.get(z); 
    options.add(point); 
} 
line = myMap.addPolyline(options); 

Answer 2

는

How to buffer a polyline in Android or draw a polygon around a polyline?

아마

당신의 문제를 해결할 수

Answer 3

도움이 필요하시면 .. 먼저 Google 개발자 accoun에서 Google 서버 키를 만드십시오. 이 당신을 도울 것입니다 t

GoogleDirection.withServerKey(getResources().getString(R.string.SERVER_KEY)) 
         .from(SourceLatlng) 
         .to(DestinationLatlng) 
         .execute(new DirectionCallback() { 
          @Override 
          public void onDirectionSuccess(Direction direction, String message) { 
           if (direction.isOK()) { 
            routeSucess2(direction, message,SourceLatlng,DestinationLatlng); 
           } else { 
            //selectedRawLine = ERROR; 
           } 

          } 

          @Override 
          public void onDirectionFailure(Throwable t) { 
           t.printStackTrace(); 
          } 
         }); 

는 구글 방향

private void routeSucess2(Direction direction, String message,LatLng sourceLatlng,LatLng DestinationLng) { 

     for (Route route : direction.getRouteList()) { 
      PolylineOptions polyoptions = new PolylineOptions(); 
      polyoptions.color(getResources().getColor(R.color.primary__dark)); 
      polyoptions.width(5); 
      polyoptions.addAll(route.getOverviewPolyline().getPointList()); 
      poly = googleMap.addPolyline(polyoptions); 
      poly.setClickable(true); 

     } 
     LatLngBounds.Builder latLngBuilder = new LatLngBounds.Builder(); 
     if(sourceLatlng!=null) 
     latLngBuilder.include(sourceLatlng); 
     if(DestinationLng!=null) 
     latLngBuilder.include(DestinationLng); 

     try { 
      LatLngBounds bounds = latLngBuilder.build(); 
      CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 
        UiHelper.dpToPixel(getActivity(), 135)); 
      googleMap.animateCamera(cu); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 

    } 

를 사용하여 경로를 그립니다.

Answer 4

폴리 라인에 대해 overview_path를 사용하지 마십시오. 모든 포인트를 포함하지 않고 모든 다리에서 포인트를 잡고 폴리 라인을 만드는 데 사용합니다.

var polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
}); 
var bounds = new google.maps.LatLngBounds(); 


var legs = response.routes[0].legs; 
for (i=0;i<legs.length;i++) { 
    var steps = legs[i].steps; 
    for (j=0;j<steps.length;j++) { 
    var nextSegment = steps[j].path; 
    for (k=0;k<nextSegment.length;k++) { 
     polyline.getPath().push(nextSegment[k]); 
     bounds.extend(nextSegment[k]); 
    } 
    } 
} 

polyline.setMap(map); 
map.fitBounds(bounds); 

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51.276092, 1.028938), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map, 
 
    preserveViewport: true 
 
    }); 
 
    directionsService.route({ 
 
    origin: new google.maps.LatLng(51.269776, 1.061326), 
 
    destination: new google.maps.LatLng(51.30118, 0.926486), 
 
    waypoints: [{ 
 
     stopover: false, 
 
     location: new google.maps.LatLng(51.263439, 1.03489) 
 
    }], 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status === google.maps.DirectionsStatus.OK) { 
 
     // directionsDisplay.setDirections(response); 
 
     var polyline = new google.maps.Polyline({ 
 
     path: [], 
 
     strokeColor: '#0000FF', 
 
     strokeWeight: 3 
 
     }); 
 
     var bounds = new google.maps.LatLngBounds(); 
 

 

 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
      var nextSegment = steps[j].path; 
 
      for (k = 0; k < nextSegment.length; k++) { 
 
      polyline.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
      } 
 
     } 
 
     } 
 

 
     polyline.setMap(map); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>