[010/API]Kakao Map API | 로드뷰 넣기

1.  문제상황

---

우리 사이트는 각 대리점별로 위치와 리뷰를 담은 디테일 페이지가 있다. 이번에는 이 디테일 페이지 맨 위에 로드뷰를 띄워서 위치를 더 확실히 알려주려고 한다.

(공식문서 참고!https://apis.map.kakao.com/web/sample/roadviewOverlay1/)

 

2.  매장 detail 페이지에 매장 로드뷰를 띄워보자!

---

url.py

---

urlpatterns = [
    ...	
    path('<int:pk>', views.detail, name="store_detail"),
    ...
]

👉🏻먼저 매장 디테일 페이지로 가는 url을 파주자! '<int:pk>' 자리에 매장 id값을 넣어주어 각 매장의 디테일 페이지로 이동할 수 있다.

 

 

views.py

---

def detail(request, pk):
	store = get_object_or_404(Store, pk=pk)
	return render(request, 'store/detail.html', locals())

👉🏻url에서 받아온 id(=pk)값으로 매장을 찾아 template으로 return 해준다.

 

detail.html

---

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview"  class="image-container"></div>

👉🏻먼저 로드뷰를 띄울 div를 판다.

var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var geocoder = new kakao.maps.services.Geocoder(); // 주소-좌표 변환 객체를 생성

function Roadview (){
  // 주소로 좌표를 검색합니다
  geocoder.addressSearch('{{ store.location }}', function(result, status) {
    // 정상적으로 검색이 완료됐으면
    if (status === kakao.maps.services.Status.OK) {
      var position = new kakao.maps.LatLng(result[0].y, result[0].x);
      // 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
      roadviewClient.getNearestPanoId(position, 50, function(panoId) {
          roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
          rvResetValue.panoId = panoId;
      });

      setTimeout(rvMarker, 1500);
      function rvMarker() {
        // 로드뷰에 올릴 마커를 생성합니다.
        var rMarker = new kakao.maps.Marker({
            position: position,
            map: roadview //map 대신 roadview(로드뷰 객체)로 설정하면 로드뷰에 올라갑니다.
        });

        // 로드뷰에 올릴 장소명 인포윈도우를 생성합니다.
        var rLabel = new kakao.maps.InfoWindow({
            position: position,
            content: '{{ store.name }}'
        });
        rLabel.open(roadview, rMarker);  

        // 로드뷰 마커가 중앙에 오도록 로드뷰의 viewpoint 조정 합니다.
        var projection = roadview.getProjection(); // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다.

        // 마커의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다.
        var viewpoint = projection.viewpointFromCoords(rMarker.getPosition(), rMarker.getAltitude());
        roadview.setViewpoint(viewpoint); //로드뷰에 뷰포인트를 설정합니다.
      }
    }
  });
}

Roadview();

👉🏻전체 코드는 다음과 같다.

var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var geocoder = new kakao.maps.services.Geocoder(); // 주소-좌표 변환 객체를 생성

👉🏻먼저 로드뷰를 띄울 기본적인 도구들을 세팅한다.

function Roadview (){
  // 주소로 좌표를 검색합니다
  geocoder.addressSearch('{{ store.location }}', function(result, status) {
    // 정상적으로 검색이 완료됐으면
    if (status === kakao.maps.services.Status.OK) {
      var position = new kakao.maps.LatLng(result[0].y, result[0].x);
      // 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
      roadviewClient.getNearestPanoId(position, 50, function(panoId) {
          roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
          rvResetValue.panoId = panoId;
      });
    }
  });
}

👉🏻그리고 Roadview라는 함수를 만든다. 

• view에서 받아온 변수인 store에서 location(주소)값을 addressSearch함수에 넣어 좌표를 검색한다.
• 검색이 완료됐으면 해당 좌표로 로드뷰를 띄운다.

그러면 매장 근처로 로드뷰 띄우기 성공!! (나무 뒤에 매장 있어요)

  function rvMarker() {
    // 로드뷰에 올릴 마커를 생성합니다.
    var rMarker = new kakao.maps.Marker({
        position: position,
        map: roadview //map 대신 roadview(로드뷰 객체)로 설정하면 로드뷰에 올라갑니다.
    });

    // 로드뷰에 올릴 장소명 인포윈도우를 생성합니다.
    var rLabel = new kakao.maps.InfoWindow({
        position: position,
        content: '{{ store.name }}'
    });
    rLabel.open(roadview, rMarker);   

    // 로드뷰 마커가 중앙에 오도록 로드뷰의 viewpoint 조정 합니다.
    var projection = roadview.getProjection(); // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다.

    // 마커의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다.
    var viewpoint = projection.viewpointFromCoords(rMarker.getPosition(), rMarker.getAltitude());
    roadview.setViewpoint(viewpoint); //로드뷰에 뷰포인트를 설정합니다.
  }

👉🏻그리고 Roadview 함수 안에 rvMarker함수를 추가한다. 이 함수는 로드뷰에 마커와 인포윈도우를 올린다.

• 아까 구한 좌표로 마커를 찍고 위에 인포윈도우를 올린다.
• 로드뷰 마커가 로드뷰의 중앙에 오도록 viewpoint를 조정한다.

그러면 로드뷰에 마커와 해당 대리점의 이름이 들어간 인포윈도우까지 짠!