토이프로젝트(3)- 주변 맛집

오늘은 좀 수정을 했다. 내가 생각한 것은 처음 입장시 자기 주변 맛집을 찾아주는 거였다.

 

그래서 오늘은 입장시 바로 자기 위치를 찾아서 화면 띄워주는것 까지 해볼것이다. 일단 카카오 api는 좋다.

 

먼저 전체 코드이다.

<template>
   <v-container>
            <v-row>
              <v-col>
                  <input type="text" id="keyword" value="이태원 맛집" placeholder="sad"/>
                  <v-btn @click="initMap">dasfd</v-btn>
              </v-col>
            </v-row>
            <v-row justify="center">
              <v-col cols="10">
                <v-sheet min-height="20vh" rounded="lg">

                </v-sheet>
              </v-col>
            </v-row>
            <v-row justify="center">
              <v-col cols="10" >
                <v-sheet  min-height="70vh" rounded="lg">
                  <!--  -->
                  <div id="map" style="min-height:70vh;"></div>
                </v-sheet>
              </v-col>
            </v-row>
          </v-container>
</template>
<script>
// import axios from 'axios'
export default {
  data: () => ({
    keyWord: ''
  }),
  mounted () {
    // window 글로벌 객체 kakao 객체가 존재 && 카카오.맵 객체 존재?
    if (window.kakao && window.kakao.maps) {
      this.initMap()// 존재하면 initMap()실행
    } else { // 존재 하지 않으면 script에 kakao스크립트를 헤드에 넣는 것을 함
      const script = document.createElement('script')
      /* global kakao */
      script.onload = () => kakao.maps.load(this.initMap)
      script.src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=내 앱키&libraries=services,clusterer,drawing'
      document.head.appendChild(script)
    }
  },
  methods: {
    // 현재 위치에서 주변 맛집을 표현해야함
    initMap () {
      const container = document.getElementById('map')
      const option = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 10
      }
      const map = new kakao.maps.Map(container, option)
      // HTML5의 지오로케이션으로 사용할 수 있는 지 확인
      if (navigator.geolocation) {
        // GeoLocation을 이용해서 접속 위치를 얻어옴
        navigator.geolocation.getCurrentPosition(function (position) {
          const lat = position.coords.latitude // 위도

          const lon = position.coords.longitude // 경도

          const locPosition = new kakao.maps.LatLng(lat, lon)
          const message = '<div style="padding:5px;">여기에 계신가요?</div>' // 인포윈도우에 표시될 내용

          // 마커와 인포윈도우를 표시한다.
          displayMarker(locPosition, message)
        })
      } else {
        var locPostion = new kakao.maps.LatLng(33.450701, 126.570667)
        var message = '현재위치를 찾을 수 없습니다.'

        displayMarker(locPostion, message)
      }
      // 지도에 마커와 인포윈도우를 표시하는 함수
      function displayMarker (locPosition, message) {
        const marker = new kakao.maps.Marker({
          map: map,
          position: locPosition
        })
        const iwContent = message // 인포윈도우에 표시할 내용
        const iwRemovaable = true
        // 인포 윈도우 생성
        var infowindow = new kakao.maps.InfoWindow({
          content: iwContent,
          removavle: iwRemovaable
        })
        infowindow.open(map, marker)

        map.setCenter(locPosition)
      }
    }

  }
}
</script>

먼저 하나 하나 보겠다.

 

html 부분은 볼게 없다. 그냥 div하나에다가 박아넣어 놓기만 하면 된다.

 

js부분

<script>
// import axios from 'axios'
export default {
  data: () => ({
    keyWord: ''
  }),
  mounted () {
    // window 글로벌 객체 kakao 객체가 존재 && 카카오.맵 객체 존재?
    if (window.kakao && window.kakao.maps) {
      this.initMap()// 존재하면 initMap()실행
    } else { // 존재 하지 않으면 script에 kakao스크립트를 헤드에 넣는 것을 함
      const script = document.createElement('script')
      /* global kakao */
      script.onload = () => kakao.maps.load(this.initMap)
      script.src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=내 앱키&libraries=services'
      document.head.appendChild(script)
    }
  },
  methods: {
    // 현재 위치에서 주변 맛집을 표현해야함
    initMap () {
      const container = document.getElementById('map')
      const option = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 10
      }
      const map = new kakao.maps.Map(container, option)
      // HTML5의 지오로케이션으로 사용할 수 있는 지 확인
      if (navigator.geolocation) {
        // GeoLocation을 이용해서 접속 위치를 얻어옴
        navigator.geolocation.getCurrentPosition(function (position) {
          const lat = position.coords.latitude // 위도

          const lon = position.coords.longitude // 경도

          const locPosition = new kakao.maps.LatLng(lat, lon)
          const message = '<div style="padding:5px;">여기에 계신가요?</div>' // 인포윈도우에 표시될 내용

          // 마커와 인포윈도우를 표시한다.
          displayMarker(locPosition, message)
        })
      } else {
        var locPostion = new kakao.maps.LatLng(33.450701, 126.570667)
        var message = '현재위치를 찾을 수 없습니다.'

        displayMarker(locPostion, message)
      }
      // 지도에 마커와 인포윈도우를 표시하는 함수
      function displayMarker (locPosition, message) {
        const marker = new kakao.maps.Marker({
          map: map,
          position: locPosition
        })
        const iwContent = message // 인포윈도우에 표시할 내용
        const iwRemovaable = true
        // 인포 윈도우 생성
        var infowindow = new kakao.maps.InfoWindow({
          content: iwContent,
          removavle: iwRemovaable
        })
        infowindow.open(map, marker)

        map.setCenter(locPosition)
      }
    }

  }
}
</script>