php에서 네이버 지도 API Polyline 작업 질문 있습니다

Question

네이버 클라우드 플랫폼의 지도 API를 이용하여 지도상에 폴리라인을 그리려고 하는데요.Directions 기능을 접목하려고 php에서 cURL 요청을 해서 JSON 데이터를 받아오는 데까지는 성공했습니다. php 코드$url = "https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving?start=129.378449,36.067917&goal=129.382728,36.082259&option=trafast"; $headers = array("X-NCP-APIGW-API-KEY-ID: 생략", "X-NCP-APIGW-API-KEY: 생략"); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // exec 실행 후 결과 자동으로 출력 안됨 $result = curl_exec($ch); if ($result === false) { print_r(curl_errno($ch)); echo "
"; print_r(curl_error($ch)); echo "
"; } curl_close($ch); ?> JSON 결과{ "code": 0, "message": "길찾기를 성공하였습니다.", "currentDateTime": "2019-04-17T12:44:20", "route": { "trafast": [ { "summary": { "start": { "location": [ 129.3784486, 36.0679168 ] }, "goal": { "location": [ 129.3827276, 36.0822581 ], "dir": 1 }, "distance": 1961, "duration": 356146, "bbox": [ [ 129.3782543, 36.0679198 ], [ 129.3827336, 36.0826157 ] ], "tollFare": 0, "taxiFare": 3300, "fuelPrice": 199 }, "path": [ [ 129.3782543, 36.0679198 ], [ 129.378262, 36.0682415 ], [ 129.3786038, 36.0682334 ], [ 129.378737, 36.0682331 ], [ 129.3788124, 36.0684159 ], [ 129.3788995, 36.068574 ], [ 129.3790992, 36.0689414 ], [ 129.3791919, 36.0691518 ], [ 129.3792869, 36.0693657 ], [ 129.3793243, 36.0697248 ], [ 129.3793619, 36.0703246 ], [ 129.3794041, 36.0708386 ], [ 129.3794119, 36.0709332 ], [ 129.3794192, 36.0710061 ], [ 129.3795195, 36.0720457 ], [ 129.3795441, 36.0722896 ], [ 129.3795656, 36.0724452 ], [ 129.3795854, 36.0726251 ], [ 129.3795963, 36.072707 ], [ 129.379618, 36.0728734 ], [ 129.3796698, 36.0731836 ], [ 129.3798036, 36.0734853 ], [ 129.3799097, 36.0742598 ], [ 129.3800412, 36.0750708 ], [ 129.3801435, 36.0757777 ], [ 129.3802725, 36.0767195 ], [ 129.3803275, 36.0771639 ], [ 129.3803421, 36.0774486 ], [ 129.3803415, 36.077564 ], [ 129.3803433, 36.0778244 ], [ 129.3803344, 36.0782428 ], [ 129.380313, 36.0786993 ], [ 129.380305, 36.0788752 ], [ 129.3802996, 36.0789763 ], [ 129.3802906, 36.0791558 ], [ 129.3802872, 36.0792451 ], [ 129.3802818, 36.0793921 ], [ 129.3802503, 36.0802156 ], [ 129.3802465, 36.0805672 ], [ 129.3802403, 36.0807737 ], [ 129.3802445, 36.0809026 ], [ 129.3802429, 36.0809774 ], [ 129.3802413, 36.0813308 ], [ 129.3802381, 36.0814733 ], [ 129.380203, 36.0824735 ], [ 129.3802022, 36.0825303 ], [ 129.3802789, 36.0825354 ], [ 129.3804492, 36.0825499 ], [ 129.3822864, 36.0826157 ], [ 129.3822993, 36.0819908 ], [ 129.3827336, 36.0819975 ] ], "section": [ { "pointIndex": 3, "pointCount": 43, "distance": 1589, "name": "삼흥로", "congestion": 2, "speed": 20 }, { "pointIndex": 45, "pointCount": 4, "distance": 186, "name": "장량로", "congestion": 0, "speed": 20 }, { "pointIndex": 48, "pointCount": 2, "distance": 69, "name": "장량로18번길", "congestion": 0, "speed": 23 } ], "guide": [ { "pointIndex": 1, "type": 3, "instructions": "'삼흥로69번길' 방면으로 우회전", "distance": 36, "duration": 6480 }, { "pointIndex": 3, "type": 2, "instructions": "'삼흥로' 방면으로 좌회전", "distance": 42, "duration": 16800 }, { "pointIndex": 45, "type": 3, "instructions": "'장량로' 방면으로 우회전", "distance": 1589, "duration": 280786 }, { "pointIndex": 48, "type": 3, "instructions": "'장량로18번길' 방면으로 우회전", "distance": 186, "duration": 33480 }, { "pointIndex": 49, "type": 2, "instructions": "'법원로79번길' 방면으로 좌회전", "distance": 69, "duration": 10800 }, { "pointIndex": 50, "type": 88, "instructions": "목적지", "distance": 39, "duration": 7800 } ] } ] } } 그 후 이 값을 JavaScript의 Object로 받아오는 데까지 했습니다.var parsed_data = ; console.log(parsed_data); 결과 화면(Chrome Console) 여기에서 route 안의 trafast 안의 path의 좌표(Lng, Lat 순으로 되어있음)를 JavaScript로 전달하려고 합니다.네이버 지도 예제 페이지(https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-polygon-simple.example.html)에서는 Polyline의 옵션에서 path 값을 var polyline = new naver.maps.Polyline({ map: map, path: [ new naver.maps.LatLng(37.359924641705476, 127.1148204803467), new naver.maps.LatLng(37.36343797188166, 127.11486339569092), new naver.maps.LatLng(37.368520071054576, 127.11473464965819), new naver.maps.LatLng(37.3685882848096, 127.1088123321533), new naver.maps.LatLng(37.37295383612657, 127.10876941680907), new naver.maps.LatLng(37.38001321351567, 127.11851119995116), new naver.maps.LatLng(37.378546827477855, 127.11984157562254), new naver.maps.LatLng(37.376637072444105, 127.12052822113036), new naver.maps.LatLng(37.37530703574853, 127.12190151214598), new naver.maps.LatLng(37.371657839593894, 127.11645126342773), new naver.maps.LatLng(37.36855417793982, 127.1207857131958) ] });이런 식으로 넣으면 좌표값을 따라 폴리라인이 생성된다고 합니다. 제가 php로 가져온 JSON 형식의 path 배열값들을 위의 자바스크립트 객체의 옵션값인 path 안에 전달해주려면 어떻게 해야 할까요?필요한 절차는 이렇습니다.1. 좌표값이 longitude, latitude 순으로 되어있으므로 latitude, longitude로 바꿔줘야 함.2. 좌표값 앞에 new naver.maps.LatLng() 메소드를 달아서 전달해야 함.3. polyline 객체의 path 옵션 값으로 전달한다.

php에서 네이버 지도 API Polyline 작업 질문 있습니다

0개의 답변

Q&A 목록