강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của tprkd230605
tprkd230605

câu hỏi đã được viết

Tạo dịch vụ bản đồ với Corona Map Developers 1

Triển khai chức năng tìm kiếm điểm đến sử dụng API Kakao

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

Viết

·

389

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>

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

express웹앱vscodenodejs

Câu trả lời 2

1

 libaries=services

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

1

tprkd230605님의 프로필 이미지
tprkd230605
Người đặt câu hỏi

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

Hình ảnh hồ sơ của tprkd230605
tprkd230605

câu hỏi đã được viết

Đặt câu hỏi