320x100 Projects/matjipfind17 내 위치 직접선택 기능, 최대 검색 거리, 네이버 검색 기능 먼저 geolocation 을 통해 받아온 위치가 정확하지 않았을 때가 많았다. 그래서 1. '내 위치 가져오기' 기능 실행시 드래그를 통해 정확한 위치 설정 가능하도록 지정 2. 그래도 석연치 않을 때는 '내 위치 직접선택' 기능 이용 먼저 드래그를 통해 정확한 위치를 설정 가능하도록 해야 한다. var infowindow = new kakao.maps.InfoWindow({ content: '' + '위치가 부정확하다면 드래그를 통해 정확한 위치로 옮겨주세요!' }); infowindow.open(map, marker); // 기존에 마커가 있다면 제거 marker.setMap(null); marker.setMap(map); // 마우스를 마커에 올릴 시 인포윈도우 삭제 kakao.maps.event.. 2021. 1. 16. 키워드 검색기능과 리스트 얻기 기능 먼저 만능 부트스트랩을 사용하여 키워드를 입력받을 form과 버튼을 만든다. 검색 버튼은 클릭시 keywordSearch 함수와 연결해 놓는다. 이렇게 만들어주면 이런 식으로 키워드를 입력하는 form과 검색 버튼이 생긴다. 최근키워드라고 입력해놓은 곳은, 후에 로그인 기능을 도입하였을 때 이전에 검색한 키워드를 띄워줄 부분이다. 그리고 카카오맵 api를 포함하는 코드에 &libaries=services를 추가하여 services 라이브러리를 활용할 수 있도록 만들 것이다. 이제 map.js를 열어 함수를 추가한다. // 검색 버튼 클릭시 function keywordSearch(){ var keyword = $('#keyword').val(); var markers = []; // 검색 결과 목록이나 .. 2021. 1. 15. 카카오맵 API로 변경, 내위치 가져오기 기능 키워드로 주변 음식점 검색 기능을 구현하기 위해 여러가지 정보를 찾아보고 있었는데, 2020년 말부터 네이버 플레이스(음식점 정보를 제공해주는 서비스)의 URL 요청방식이 달라져서 리뷰정보를 가져올 수 없다고 한다... 그리고 네이버 맵 API 서비스는 키워드(국밥,불고기)로 검색하는 함수를 가지고 있지 않는 것으로 보인다. Document를 엄청 뒤져봤는데 도통 해당 기능을 찾을 수 없다. 그래서 카카오 맵 API 로 변경하기로 했다. 네이버에 비해 예제와 Document가 훨씬 더 간결하고 깔끔하게 나와 있다. 여기는 키워드로 검색 기능도 포함되어 있다. 먼저 apis.map.kakao.com/web/ 이곳에 접속한뒤, 좌측 하단의 키 발급을 선택하여 가입을 진행한다. 카카오계정이 등록되어 있어서 그.. 2021. 1. 14. 네이버 클라우드 플랫폼 가입과 지도 넣기 먼저 www.ncloud.com/ 에서 가입을 진행해 준다. 그 후 콘솔 페이지 console.ncloud.com/dashboard 로 이동하여, Products & Services 를 선택, API 를 선택하고, Application 등록을 선택해 준다. 그후 이름 설정 -> Web Dynamic Map 체크해주고 서비스 URL은 일단 임시적으로 http://localhost:8080 으로 지정해 준다. 이렇게 등록해준다. 그러면 인증 정보에 이름과 Client ID가 나온다. 이 ClientId 를 이용하여 main.html에 src 경로를 추가해주고, middle-left div에 id를 map 으로 준 뒤, 그 후 아무 부분에서나 맵을 생성해 준다. 이때 인자로 'id'를 주어야 한다. 그러면 이.. 2021. 1. 13. 이전 1 2 3 4 5 다음
