간단한 카카오 지도 api
(참고문서 - https://apis.map.kakao.com/web/guide/ )
문서의 준비하기- 시작하기 태그를 보면 도메인 등록과 appkey 받는 법이 상세하게 적혀있으니 직접 따라해보자.
카카오 지도는 지도를 그리는 javascript API를 먼저 불러오면 실행이 안되는 오류가 있는데
참고 문서 순서에 맞게 진행해 보자.
1.지도를 담을 영역
<div id="map" style="width:500px;height:400px;"></div>
<!-- 지도를 담고 스타일은 500x400으로 만들겠습니다 -->2.지도를 그리는 JavascriptAPI불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>appkey는 만들었던 애플리케이션에서 appkey 부분의 java key를 가지고 오면 된다.
※//이라는 상대 프로토콜을 사용하면, 사용자의 http,https 환경에 따라 자동으로 해당 프로토콜을 따라가게 됨.
api를 로이하는 스크립트 태그는 html파일 안의 head,body등 어떠한 위치에 넣어도 상관없지만
반드시 실행 코드보다 먼저 선언되어야 한다.
3. 지도를 띄우는 코드 작성
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴Map 객체의 두 번째 파라메터로 넣는 options의 속성 중, center은 지도를 생성하는데 반드시 필요하다.
center에 할당할 값은 LatLng 클래스를 사용하여 생성, 흔히 위경도 좌표라고 부르는 WGS84 좌표계의 좌표값을 넣어서 만드는데 생성인자는 위도(latitude), 경도(longitude) 순으로 넣어주자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>※주의 할 점
처음 배울 때 해드 쪽에 스크립트가 들어가는 걸로 배워 놓은 상태라 스크립트 부분을 해드로 집어 넣어 봤는데 작동이 되지 않았다.
후에 튜터님 가르침으로 알게 된 것은 $(document).ready(function () {}); 를 이용해 스크립트 부분을 html이 다 띄워진 뒤로 넣어 보라는 것이다.
일단 도큐먼트 레디 라는 저 함수를 넣지 않으면 html이 띄워지지 않은 상황에서 지도를 띄우려는 스크립트가 먼저 작동해 div의 맵이 없는 상황이라 오류가 나는 것이었다. 코드는 어쨌든 위에서부터 좌르륵 읽어 내려오기 때문에 위에 코드는 div도 아래 위치 해 있어 작동 되는 것이다.
-flask에 대해서
request 와 requests의 차이
request : 플라스크 내장 함수 ( from flask import request)
requests : pip install requests >> pip로 설치한 내부 라이브러리
GET
요청이 들어오면 응답을 하는데 json(JavaScript Objext Notation)형태로 주고 받을 수 있다.
requests.get('사이트주소') >> 사이트에 http 요청을 보냄
정상적으로 실행되면 http 응답 객체인 <Response [200]>이 리턴된다.
response = reauests.get('사이트주소') 식으로 만들어
response.json() 하면 딕셔너리를 볼 수 있음
이를 또 변수에 저장하면
data = response.json()
data['key']로 value를 조회 할 수 있다.
쿼리 문자열의 구문 분석된 내용(즉 물음표 뒤의 URL부분)
프로토 타입은 args.get()
from flask import request
request.get_json() # json 데이터를 가져온다
request.get_json('key') #key값으로 value를 바로 조회
request.args.get('key') # request.get_json('key')값과 결과가 같다만약 key를 이미 알고 있다면(어떤 데이터를 조회하고 싶은지) request.args.get('key')로 원하는 데이터를 바로 받을 수 있다.
POST 메서드의 경우, 데이터를 주고받을 때 http body에 들어가기 때문에 form에서 데이터를 전송한다.
request.form['key'] 형식으로 데이터를 받는다.
args예시
from flask import Flask ,request
app = Flask(__name__)
@app.route('/get')
def get():
arg = request.args.get('data')
arg2 = request.args.get('data2')
print(arg,arg2)
return arg + arg2
app.run(host='0.0.0.0', debug=True, port="1234")
#결과는 localhost:1234/get?data=Hello%data2=World
#HelloWorld
dsec와 asc
내림차순 과 오름차순
기본값은 오름차순이다.
'정리' 카테고리의 다른 글
| 15 TIL 정리 (카카오 지도api, 400에러,주소자동완성) (0) | 2022.05.10 |
|---|---|
| 12 TIL 정리(해시함수,JWT) (0) | 2022.05.08 |
| 11TIL 정리(selenium) (0) | 2022.05.06 |
| 10TIL 정리 (Jinja2,나만의 단어장) (0) | 2022.04.28 |
| 9 TIL 정리(파일 업로드) (0) | 2022.04.28 |