728x90
2021/06/30(수)
Python / JavaScript 이용한 전기차 충전소 위치 데이터 출력 및 위도 경도 추출
https://cordingdoah.tistory.com/126
Python / JavaScript 이용한 지역별 전기차 충전소 지도 출력 프로젝트 - 1 (전기차 충전소 위치 데이터
2021/06/30(수) 친구가 전기차를 충전소 위치를 한 번에 볼 수 있는 웹 화면이 있으면 좋겠다고 의견을 냈고 금방 만들 거 같아서 필 받아서 빠르게 만들어 봤다 전기차 충전소를 위치를 가지고 있
cordingdoah.tistory.com
이제 위에서 생성한 html 지도를 가지고 웹페이지를 생성한 뒤 선택한 지역별로 지도를 화면에 띄우는 코드를 구현해 보도록 하자!
<carproject.html>
- 자바스크립트 파일
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Electric Charge Station</title>
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script>
function selectLoc() {
// 지역선택 번호 받아오기
var selectArea = document.getElementById("area").options.selectedIndex;
//받아온 값에서 -1을 빼기
selectArea -= 1;
var htmlUrl = "";
//지역을 선택하면 값을 가져와서 비교를 통해 지역에 따라 맞는 지도를 출력
switch (selectArea) {
case 0: //전체
htmlUrl = "./Nationwide.html";
break;
case 1: //강원도
htmlUrl = "./gangwon_do.html";
break;
case 2: //경기도
htmlUrl = "./Gyeonggi_do.html";
break;
case 3: //경상남도
htmlUrl = "./Gyeongsangnam_do.html";
break;
case 4: //경상북도
htmlUrl = "./Gyeongsangbuk_do.html";
break;
case 5: //광주
htmlUrl = "./Gwangju.html";
break;
case 6: //대구
htmlUrl = "./Dae_gu.html";
break;
case 7: //대전
htmlUrl = "./Daejeon.html";
break;
case 8: //부산
htmlUrl = "./Busan.html";
break;
case 9: //서울
htmlUrl = "./Seoul.html";
break;
case 10: //세종
htmlUrl = "./Sejong.html";
break;
case 11: //울산
htmlUrl = "./Ulsan.html";
break;
case 12: //인천
htmlUrl = "./Incheon.html";
break;
case 13: //전라남도
htmlUrl = "./Jeollanam_do.html";
break;
case 14: //전라북도
htmlUrl = "./Jeollabuk_do.html";
break;
case 15: //제주
htmlUrl = "./Jeju.html";
break;
case 16: //충청남도
htmlUrl = "./Chungcheongnam_do.html";
break;
case 17: //충청북도
htmlUrl = "./Chung_cheong_bukdo.html";
break;
}
//iframe에 src값을 변경
document.getElementById('printmap').src = htmlUrl;
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.titlename {
margin: 0 auto;
width: 800px;
height: 100px;
text-align: center;
line-height: 90px;
margin-top: 20px;
margin-bottom: 30px;
}
.name {
font-size: 40px;
font-style: normal;
font-weight: 500;
color: rgb(0, 53, 96);
}
.slider {
/* margin: 0 auto; */
width: 100%;
height: 550px;
padding: 20px;
}
.carousel-inner>.carousel-item>img {
height: 530px;
}
.selectmap {
border-radius: 5px;
border: 2px solid rgb(86, 125, 157);
margin: 0 auto;
width: 360px;
height: 40px;
text-align: center;
line-height: 35px;
margin-top: 20px;
margin-bottom: 30px;
display: flex;
}
.Choose {
font-size: 15px;
margin-left: 10px;
margin-right: 10px;
font-weight: 500;
}
.menu {
height: 30px;
margin-top: 3px;
border-radius: 7px;
}
.mapbox {
border-radius: 15px;
border: 1px solid rgb(86, 125, 157);
margin: 0 auto;
width: 850px;
height: 850px;
}
a iframe {
border-radius: 15px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$(function () {
// 이미지 슬라이드 컨트롤를 사용하기 위해서는 carousel를 실행해야한다.
$(".carousel").carousel({
// 슬리아딩 자동 순환 지연 시간
// false면 자동 순환하지 않는다.
interval: 2500,
// hover를 설정하면 마우스를 가져대면 자동 순환이 멈춘다.
pause: "hover",
// 순환 설정, true면 1 -> 2가면 다시 1로 돌아가서 반복
wrap: true,
// 키보드 이벤트 설정 여부(?)
keyboard: true
});
});
</script>
<div class="titlename">
<label class="name">ELECTRIC CHARGE STATION</label>
</div>
<div class="slider">
<div id="demo" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<!-- 슬라이드 쇼 -->
<div class="carousel-item active">
<!--가로--> <img class="d-block w-100"
src="https://jmagazine.joins.com/_data/photo/2020/08/3698936108_60Ogki3h_1.jpg"
alt="First slide">
</div>
<div class="carousel-item"> <img class="d-block w-100"
src="http://news.samsungdisplay.com/wp-content/uploads/2020/07/shutterstock_1614773872.jpg"
alt="Second slide"> </div>
<div class="carousel-item"> <img class="d-block w-100"
src="https://www.noblesse.com/shop/data/m/editor_new/2020/02/11/4fa57b817b4e215c0122_l_automobile_01.jpg"
alt="Third slide"> </div> <!-- / 슬라이드 쇼 끝 -->
<!-- 왼쪽 오른쪽 화살표 버튼 --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span
class="carousel-control-prev-icon" aria-hidden="true"></span> <!-- <span>Previous</span> -->
</a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <!-- <span>Next</span> --> </a>
<!-- / 화살표 버튼 끝 -->
<!-- 인디케이터 -->
<div class="carousel-caption d-none d-md-block">
<h5>Green New Deal</h5>
<p>environment-friendly</p>
</div>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<!--0번부터시작-->
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul> <!-- 인디케이터 끝 -->
</div>
</div>
</div>
<div class="selectmap">
<label class="Choose">CHOOSE AREA : </label>
<select class="menu" name="" id="area" onchange="selectLoc()">
<option value="20">--Please choose an option--</option>
<option value="0">전체</option>
<option value="1">강원도</option>
<option value="2">경기도</option>
<option value="3">경상남도</option>
<option value="4">경상북도</option>
<option value="5">광주광역시</option>
<option value="6">대구광역시</option>
<option value="7">대전광역시</option>
<option value="8">부산광역시</option>
<option value="9">서울특별시</option>
<option value="10">세종특별자치시</option>
<option value="11">울산광역시</option>
<option value="12">인천광역시</option>
<option value="13">전라남도</option>
<option value="14">전라북도</option>
<option value="15">제주특별자치도</option>
<option value="16">충청남도</option>
<option value="17">충청북도</option>
</select>
</div>
<!-- 지도 -->
<div class="mapbox">
<a>
<iframe src="" id="printmap"></iframe>
</a>
</div>
</body>
</html>
--> 결과화면
1. 기본적인 html 웹 페이지생성
2. 부트스트랩을 이용해 슬라이드 구현
3. select-option을 사용하여 선택을 받을 수 있도록한다.
4. 선택이 바뀌면(onchange) selectLoc() 메소드 실행
5. 아래 mapbox안에 iframe을 삽입
6. selectLoc() 메소드 안에는 선택한 값의 index값을 가져오기
7. switch-case문을 사용하여 선택받은 인덱스에 해당하는 htmlUrl 변수에 지역의 html 주소를 입력
8. 끝나면 iframe의 src주소값을 변경해주는 코드 수행
--> 지역 선택시 결과화면
728x90
'코딩 연습장 > Javascript' 카테고리의 다른 글
| javascript 두 날짜 값 사이에 몇 주를 포함하는 출력하기 (0) | 2022.04.01 |
|---|---|
| javaScript 일주일의 시작 일과 끝일 출력하기 (1) | 2022.03.10 |
| 자바스크립트를 이용한 개인 프로젝트 - 13(마우스 클릭 이벤트) (0) | 2021.06.16 |
| 자바스크립트를 이용한 개인 프로젝트 - 12(영상 처리 알고리즘) (0) | 2021.06.16 |
| 자바스크립트를 이용한 개인 프로젝트 - 11(영상 처리 알고리즘) (0) | 2021.06.16 |