IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #4
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #4
오늘은 미세먼지 측정지역을 구글지도로 확인하는 방법에 대한 글입니다.
글의 순서는
----------------------------------------------------------------------------
1. 메뉴구성
2. 미세먼지 측정대상 위치를 선택함
3. 선택된 지역에 대한 위도와 경도에 대한 정보를 데이터 베이스에서 찾아서 배열로 저장한다
4. 배열에 저장되 위치(경도/위도)에 해당하는 지도용 PHP를 호출 실행한다.
5. 홈페이지상 구현된 모습
6. Next step
- 구글지도의 위도 경도를 수치가 아닌 변수로 지정하고, 사용자가 선택하는 지역의 위도/경도를 데이터 베이스로 부터
불러와서, 바로 구글 지도로 변수를 통해 넘겨서 그리는 방법 구현
. 현재는 변수를 지정시에 정상 작동이 안되고 있음, 추후 개선 필요사항임.
- 미세먼지 데이터 조회와, 측정위치 선택하는 과정을 구조화/보완예정임(사용자 편의성을 위함임)
----------------------------------------------------------------------------
[ 메뉴구성 ]
1.주 메뉴 "미세먼지 모니터링 웹 서비스"의 하위 메뉴(측정지역)로 만든다
[ 미세먼지 측정대상 위치를 선택함 ]
1. 상기 그림에서 텍스트 박스에 미세먼지 측정지역을 기록하고, 선택하기 버튼을 누르면, 해당 지도가 나타남
2. 측정위치를 선택하는 코딩
- 저장위치 : 워드프레스 페이지
-------------------------------------------------------------------------------------------------
<!-- 미세먼지 측정위치를 선택하면, 해당 위치가 구글 지도에 나타냄 -->
<div class="container">
<div class="row">
<nav class="col-md-2">
<p>
[ 미세먼지 측정 위치 ]
<li>구로역</li>
<li>인천역</li>
<li>오류역</li>
<li>신도림</li>
<form action="" method="post">
<input type="text" name="location1" id="loca1">
<input type="submit" value="선택하기">
</form>
</p>
</nav>
<nav class="col-md-9">
<!-- 선택한 측정위치를 변수($LOCATION)에 저장 -->
[xyz-ips snippet="finemap"] ==> Sort code ( 입력받은 위치에 대한 지도를 나타내는 코드의 short code )
---------------------------------------------------------------------------------------------------
3. 입력받은 위치에 대한 지도를 나타낸다
- 저장위치 : php 플러그인으로 작성하고, shot 코드를 페이지에 등록해서 실행을 시킨다.
- 코드
--------------------------------------------------------------------------------------------------
// post type으로 위치를 입력 받는다 //
$location1=$_POST['location1'];
[선택된 지역에 대한 위도와 경도에 대한 정보를 데이터 베이스에서 찾아서 배열로 저장한다]
// 위치정보 데이터 베이스에 접속한다
$link = mysqli_connect("localhost","개인아이디",비밀번호,"데이터베이스 명","포트");
// $sql="select id ,location ,latitude ,longitude from 'finemap' " ;
// 위치정보중 선택된 지역에 대한 위도와 경도를 배열에 저장한다
$sql="select * from `finemap` " ;
$result=mysqli_query($link,$sql);
$rows=array();
$flag=true;
$table=array();
$table['cols']=array(
array('id'=>'id' , 'type'=>'number'),
array('location'=>'location','type'=>'string'),
array('latitude'=>'latitude','type'=>'number'),
array('longitude'=>'longitude','type'=>'number')
);
$rows=array();
while($r=mysqli_fetch_assoc($result)){
$location = $r['location'];
if ($location==$location1) {
$lat = $r['latitude'];
$long = $r['longitude'];
}
}
[ 배열에 저장되 위치(경도/위도)에 해당하는 지도용 PHP를 호출 실행한다.]
// 선택된 지역의 경도/위도값이 같은 배열의 요소값을 찾아내고, 요소값에 해당하는 지역의 지도를 실행시킨다
if ($lat==37.4766 && $long==126.617) {
require('./dust/logetincheon.php');
}elseif ($lat==37.4947 && $long==126.845) {
require('./dust/logetoryu.php');
} elseif($lat==37.5032 && $long==126.882 ) {
require('./dust/logetqua.php');
} elseif($lat==37.5088 && $long==126.891) {
require('./dust/logetsindo.php');
}
-----------------------------------------------------------------------------------------------------
4. 선택된 지역의 구글 지도를 실행함
- 하기 코드는 구로역에 대한 코드임, 다른지역의 코드는 "경도와 위도"만 틀리고, 나머지부분은 동일함, 본지에서는 생략함(중복)
- 저장위치 : www/dust/ 폴더에 php형태로 저장하고, 상기의 php require 함수를 이용해서 호출/실행 시킵니다.
-----------------------------------------------------------------------------------------------------
<div id="map" style="width:1024px;height:600px"></div>
<script>
function myMap() {
var azit = new Array();
var azitColor = new Array();
var zoomNumber = 16;
azit[0] = new google.maps.LatLng(37.5032,126.882);
azitColor[0] = "red";
var mapCanvas = document.getElementById("map");
var mapOptions = {center: azit[0], zoom: zoomNumber};
var map = new google.maps.Map(mapCanvas,mapOptions);
for(var i in azit) {
var myCity = new google.maps.Circle({
center: azit[i],
radius: 100,
strokeColor: "BLACK",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: azitColor[i],
fillOpacity: 0.4
});
myCity.setMap(map);
}
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOYundwm4l2yUb7A3nfKoj5V99wr3n9O0&callback=myMap"></script>
----------------------------------------------------------------------------------------------------------
[ 홈페이지상 구현된 모습 ]
1. 위치정보를 data base 에 저장해 놓는다.
2. 선택된 지역의 구글지도
'프로젝트 > Web Server 구축' 카테고리의 다른 글
[web sever 구축_파이선_DJANGO #1]Django로 웹 사이트 구축하기 (1) | 2017.09.10 |
---|---|
IOT(사물인터넷) 웹 서비스 구축하기( github에 웹서버 적용) #5 (0) | 2017.07.23 |
Cafe24 CDN 서버 활용하기 (0) | 2017.06.17 |
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #3 (0) | 2017.06.10 |
IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용) #2 (0) | 2017.06.08 |