임승현 / 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
let express = require("express");
let app = express();
let bodyParser = require('body-parser');
app.get('', (req, res) => {
res.sendFile(__dirname + '/test.html');
});
app.listen(3907);
\ No newline at end of file
{
"name": "test01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.17.1",
"express": "^4.15.2",
"express-session": "^1.15.2"
}
}
\ No newline at end of file
module.exports= {
html: function(title,style,list,body,control){
return `
<!doctype html>
<html>
<head>
<title>WEB - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<div id="map" style=${style}></div>
${list}
${control}
${body}
<p></p>
</body>
</html>
`;
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>키워드로 장소 검색하기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
let infowindow = new kakao.maps.InfoWindow({zIndex:1});
//지도를 표시할 div
let container = document.getElementById('map');
let options = {
center: new kakao.maps.LatLng(37.566826, 126.9786567),
level: 3
};
let map = new kakao.maps.Map(container, options);
// 장소 검색 객체를 생성합니다
let ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
ps.keywordSearch('시청역', placesSearchCB);
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
let bounds = new kakao.maps.LatLngBounds();
for (let i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
let marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
</script>
</body>
</html>
\ No newline at end of file