임승현 / Multiplex_Ticketing_Platform

Go to a project
Toggle navigation Toggle navigation pinning
임승현
d4fb1cf5 2 parents ed0b6878 b152befc

Merge branch 'feature/KakaoMapAPI' into 'master' 

Feature/kakao map api

First Merge from feature/KakaoMapAPI to master

See merge request !6
Inline Side-by-side
Showing 4 changed files with 108 additions and 0 deletions
1 +let express = require("express");
2 +let app = express();
3 +let bodyParser = require('body-parser');
4 +
5 +
6 +app.get('', (req, res) => {
7 + res.sendFile(__dirname + '/test.html');
8 +});
9 +
10 +app.listen(3907);
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "name": "test01",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "index.js",
6 + "scripts": {
7 + "test": "echo \"Error: no test specified\" && exit 1"
8 + },
9 + "author": "",
10 + "license": "ISC",
11 + "dependencies": {
12 + "body-parser": "^1.17.1",
13 + "express": "^4.15.2",
14 + "express-session": "^1.15.2"
15 + }
16 + }
...\ No newline at end of file ...\ No newline at end of file
1 +module.exports= {
2 + html: function(title,style,list,body,control){
3 + return `
4 + <!doctype html>
5 + <html>
6 + <head>
7 + <title>WEB - ${title}</title>
8 + <meta charset="utf-8">
9 + </head>
10 + <body>
11 + <h1><a href="/">WEB</a></h1>
12 + <div id="map" style=${style}></div>
13 + ${list}
14 + ${control}
15 + ${body}
16 + <p></p>
17 + </body>
18 + </html>
19 + `;
20 + }
21 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8"/>
5 + <title>키워드로 장소 검색하기</title>
6 +</head>
7 +<body>
8 + <div id="map" style="width:100%;height:350px;"></div>
9 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
10 + <script>
11 + // 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
12 + let infowindow = new kakao.maps.InfoWindow({zIndex:1});
13 + //지도를 표시할 div
14 + let container = document.getElementById('map');
15 + let options = {
16 + center: new kakao.maps.LatLng(37.566826, 126.9786567),
17 + level: 3
18 + };
19 + let map = new kakao.maps.Map(container, options);
20 + // 장소 검색 객체를 생성합니다
21 + let ps = new kakao.maps.services.Places();
22 + // 키워드로 장소를 검색합니다
23 + ps.keywordSearch('시청역', placesSearchCB);
24 +
25 + // 키워드 검색 완료 시 호출되는 콜백함수 입니다
26 + function placesSearchCB (data, status, pagination) {
27 + if (status === kakao.maps.services.Status.OK) {
28 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
29 + // LatLngBounds 객체에 좌표를 추가합니다
30 + let bounds = new kakao.maps.LatLngBounds();
31 +
32 + for (let i=0; i<data.length; i++) {
33 + displayMarker(data[i]);
34 + bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
35 + }
36 +
37 + // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
38 + map.setBounds(bounds);
39 + }
40 + }
41 + // 지도에 마커를 표시하는 함수입니다
42 + function displayMarker(place) {
43 +
44 + // 마커를 생성하고 지도에 표시합니다
45 + let marker = new kakao.maps.Marker({
46 + map: map,
47 + position: new kakao.maps.LatLng(place.y, place.x)
48 + });
49 +
50 + // 마커에 클릭이벤트를 등록합니다
51 + kakao.maps.event.addListener(marker, 'click', function() {
52 + // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
53 + infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
54 + infowindow.open(map, marker);
55 + });
56 + }
57 +
58 +
59 + </script>
60 +</body>
61 +</html>
...\ No newline at end of file ...\ No newline at end of file