목차
728x90
반응형
- 외부 API 관련 기능
1. Map 기능
- KAKAO MAP API 사용하여 서울시 지도 구현
<body>
<script type="text/javascript" src="API KEY"></script>
</body>// mapInit.js
// 지도 초기화 함수
function initializeMap() {
// Kakao 지도 API를 사용한 지도 초기화 코드
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(37.57346, 126.9790),
level: 8
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 10
});- 각 자치구청을 기준으로 마커 생성
- 마커에 커서 올릴 시 자치구 이름 확인 가능
- 마커 클릭 시 예측 범죄율 모달창 확인 가능
// mapInit.js
// 마커 클릭 시 모달창 뜨게하는 함수
function addClickEvent(marker, info) {
kakao.maps.event.addListener(marker, 'click', function () {
showModalAndInfo(info);
});
}
function showModalAndInfo(info) {
showModal();
updateModalContent(info);
}
// 마커와 모달에 정보 입력 함수
var markers = [];
for (var i = 0; i < 데이터.length; i++) {
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]),
map: map
});
var infowindow = new kakao.maps.InfoWindow({
content: 데이터[i][2]
});
markers.push(marker);
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
addClickEvent(marker, 구_정보들[i]);
}
clusterer.addMarkers(markers);
function makeOverListener(map, marker, infowindow) {
return function () {
infowindow.open(map, marker);
};
}
function makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}- 각 구의 예측 범죄율 확인을 위한 모달창 생성
- 포함된 내용 : 전체 범죄율, 5대 범죄별 범죄 발생률
- 좌측 상단에 별 표시를 이용해 즐겨찾기 등록 가능
- 우측 상단 X 표시 클릭 시 모달창 닫음
<body>
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="close-area" onclick="hideModal()">X</div>
<div class="content" id="modalContent"></div>
</div>
</div>
</body>// mapInit.js
// 모달을 표시하는 함수
function showModal() {
var modal = document.getElementById("modal");
modal.style.display = "flex";
}
// 모달을 숨기는 함수
function hideModal() {
var modal = document.getElementById("modal");
modal.style.display = "none";
}2. News 기능
- 뉴스를 띄우기 위한 사이드바 생성
- NAVER NEWS API를 사용하여 실시간 업데이트 기사 확인
- '범죄'를 키워드로 하여 최근 기사 5개 표시 및 확인 가능
<body>
<div class="map_wrap"> <!--사이드바-->
<div id="map" style="width:100%;height:100vh;position:relative;overflow:hidden;"></div>
<div id="menu_wrap" class="bg_white">
<hr>
<div id="news-container">
<h2>오늘의 뉴스</h2>
<div id="news-list"></div>
</div>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</div>
<script src="./js/newsList.js"></script>
</body>// newsList.js
// 뉴스 표시 함수 수정
async function displayNews() {
const newsListContainer = document.getElementById('news-list');
try {
// 백엔드 서버의 API에 요청
const response = await fetch('http://localhost:3000/api/news');
const newsList = await response.json();
newsListContainer.innerHTML = ''; // 이전 내용 지우기
if (newsList.length > 0) {
newsList.forEach(news => {
const newsItem = document.createElement('div');
newsItem.className = 'news-item';
newsItem.innerHTML = `
<h3>${news.title}</h3>
<a href="${news.link}" target="_blank">원문 보기</a>
`; // '원문 보기' 클릭 시 뉴스 기사 창으로 넘어감
newsListContainer.appendChild(newsItem);
});
} else {
newsListContainer.innerHTML = '<p>No news found.</p>';
}
} catch (error) {
console.error('Error fetching news:', error);
newsListContainer.innerHTML = '<p>Error fetching news.</p>';
}
}*서버 관련 코드는 아래 블로그에서 확인
[Project] 서울시 범죄 발생률 예측 서비스 - server
- 구현 웹 페이지 이미지
MAP & NEWS 기능
728x90
반응형
'Project > 서울시 범죄 발생률 예측 서비스' 카테고리의 다른 글
| [Project] 서울시 범죄 발생률 예측 서비스 - DB (2) | 2024.08.06 |
|---|---|
| [Project] 서울시 범죄 발생률 예측 서비스 - Model 1 (0) | 2024.06.09 |
| [Project] 서울시 범죄 발생률 예측 서비스 - Server (0) | 2024.06.09 |
| [Project] 서울시 범죄 발생률 예측 서비스 - 프로젝트 계획 (0) | 2024.06.09 |