인프런 커뮤니티 질문&답변

ㅎㅎㅎㅎㅎㅎㅎ님의 프로필 이미지
ㅎㅎㅎㅎㅎㅎㅎ

작성한 질문수

코로나맵 개발자와 함께하는 지도서비스 만들기 1

카카오 api를 활용한 목적지 검색 기능 구현하기

안녕하세요 오류대해 질문입니다

작성

·

317

2

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>Map</title>
  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=kscsjp2132"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ec40692b33c7adfca6bd633c21a1bc2c&libaries=services"></script>
</head>

<body>
  <div id="navbar">myfirstmap</div>
  <div id="infobox">
    <div id="infoTitle">현재 날짜</div>
    <div id="infroContent">20200914</div>
  </div>
  <div id="search">
    <input id="search_input" placeholder="목적지를 입력해주세요" />
    <button id="search_button">검색</button>
  </div>
  <div id="current">현재 위치</div>
  <div id="map" style="width:100%;height:100vh;"></div>
  <script type="text/javascript" src="/data/data.js"></script>
  <script>
    var mapOptions = {
      center: new naver.maps.LatLng(37.3595704, 127.105399),
      zoom: 10
    };
    var map = new naver.maps.Map("map", mapOptions);

    var markerList = [];
    var infowindowList = [];


    for (var i in data) {
      var target = data[i];
      var latlng = new naver.maps.LatLng(target.lat, target.lng);
      marker = new naver.maps.Marker({
        map: map,
        position: latlng,
        icon: {
          content: "<div class='marker'></div>",
          anchor: new naver.maps.Point(12, 12)
        },
      });

      var content = `<div class='infowindow_wrap'>
        <div class='infowindow_title'>${target.title}</div>
        <div class='infowindow_content'>${target.content}</div>
        <div class='infowindow_data'>${target.data}</div>
      </div>`

      var infowindow = new naver.maps.InfoWindow({
        content: content,
        backgroundColor: "#00ff0000",
        borderColor: "#00ff0000",
        anchorSize: new naver.maps.Size(0, 0)
      })

      markerList.push(marker);
      infowindowList.push(infowindow);
    }
    for (var i = 0, ii = markerList.length; i < ii; i++) {
      naver.maps.Event.addListener(map, "click", ClickMap(i))
      naver.maps.Event.addListener(markerList[i], "click", getClickHandler(i));
    }
    function ClickMap(i) {
      return function () {
        var infowindow = infowindowList[i];
        infowindow.close()
      }
    }

    function getClickHandler(i) {
      return function () {
        var marker = markerList[i];
        var infowindow = infowindowList[i];
        if (infowindow.getMap()) {
          infowindow.close();
        } else {
          infowindow.open(map, marker)
        }
      }
    }
    let currentUse = true;

    $("#current").click(() => {
      if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function (position) {
          const lat = position.coords.latitude;
          const lng = position.coords.longitude;
          const latlng = new naver.maps.LatLng(lat, lng);
          if (currentUse) {
            marker = new naver.maps.Marker({
              map: map,
              position: latlng,
              icon: {
                content: '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png">',
                anchor: new naver.maps.Point(11, 11),
              }
            });
            currentUse = false;
          }
          map.setZoom(14, false);
          map.panTo(latlng);
        })
      } else {
        alert("위치정보 사용 불가능 ")
      }
    });

    let ps = new kakao.maps.services.Places;
    let search_arr = []

    $("#search_input").on("keydown", function (e) {
      if (e.keyCode === 13) {
        let content = $(this).val();
        ps.keywordSearch(content, placeSearchCB);
      }
    })

    $("#search_button").on("click", function (e) {
      let content = $("#search_input").val()
      ps.keywordSearch(content, placeSearchCB);
    })

    function placeSearchCB(data, status, pagination) {
      if (status == kakao.maps.services.Status.OK) {
        let target = data
        const lat = target.y;
        const lng = target.x;
        const latlng = new naver.LatLng(lat, lng);
        marker = new naver.maps.Marker({
          position: latlng,
          map: map
        })
        if (search_arr.length == 0) {
          search_arr.push(marker)
        } else {
          search_arr.push(marker)
          let pre_marker = search_arr.splice(0, 1);
          pre_marker[0].setMap(null)
        }
        map.setZoom(14, false);
        map.panTo(latlng)
      } else {
        alert("no search")
      }
    }



  </script>
</body>

</html>

코드 오타가 없는거같은데 이런 오류가 나오는데 어떻게 해결해야되나요???

답변 2

1

 libaries=services

잘못 입력하셨어요 ㅎㅎ 저두 servieces라고 잘못 입력해서 api 적용이 안되어서 질문자님 코드를 살펴보니 라이브러리 철자를 잘못 입력하셨습니다.

1

안녕하세요 코드에 이상이 없는거같은데 이런 오류가뜨는데 어떻게 해결해야되나요?

ㅎㅎㅎㅎㅎㅎㅎ님의 프로필 이미지
ㅎㅎㅎㅎㅎㅎㅎ

작성한 질문수

질문하기