김원진 / Expresswayinfo24

Go to a project
Toggle navigation Toggle navigation pinning
최현영
73ef3049 1 parent c8f130a7

https://www.chyoss.tk:23023/construcion now, receive your location

Inline Side-by-side
Showing 2 changed files with 86 additions and 36 deletions
......@@ -68,7 +68,6 @@ app.get('/construction', function(req, res){
})
})
function jsonforecast(callback){ //교통예보
var url2 = 'http://data.ex.co.kr/openapi/safeDriving/forecast';
var queryParams2 = '?' + encodeURIComponent('key') + '=4365330273'; /* Service Key*/
......@@ -538,6 +537,31 @@ function viewhtml(eventObj){
});
}
function viewconstruction(eventObj){
request.post(
{
url: TARGET_URL,
headers: {
'Authorization': `Bearer ${TOKEN}`
},
json: {
"replyToken":eventObj.replyToken,
"messages":[
{
"type":"text",
"text":"실시간 고속국도 공사 상황 웹페이지로 안내합니다."
},
{
"type":"text",
"text":"https://www.chyoss.tk:23023/construction"
}
]
}
},(error, response, body) => {
console.log(body)
});
}
function leadfee(eventObj){
request.post(
......
......@@ -6,18 +6,20 @@
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<div id="map" style="width:100%; height:100%"></div>
<style type="text/css"> html, body { height:100%; overflow:hidden } .h-div {height:96%; border:3px #f99 solid} </style>
<div class="h-div"></div>
<form method="get" action="/process/mapconstruction"></form>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3ebfae70e971821ab8f14e074d068bdc"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
level: 12// 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
map.relayout();
var json = <%- JSON.stringify(construnctionjson) %>;
console.log(json);
......@@ -39,65 +41,89 @@ for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
position: positions[i].latlng, // 마커의 위치
clickable: true
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
content: '<div>'+ positions[i].content + '</div>',
removable: true // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
kakao.maps.event.addListener(marker, 'click', makeClickListener(map, marker, infowindow));
function makeClickListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(40, 40), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)};
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message, markerImage);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message, image) {
/* 아래와 같이도 할 수 있습니다 */
/*
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
map: map,
position: locPosition,
image: image
});
// 마커에 표시할 인포윈도우를 생성합니다
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
content : iwContent,
removable : iwRemoveable
});
// 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
// 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
(function(marker, infowindow) {
// 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다
kakao.maps.event.addListener(marker, 'mouseover', function() {
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
});
// 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
kakao.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
})(marker, infowindow);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
*/
</script>
</body>
</html>
\ No newline at end of file
......