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. 선택된 지역의 구글지도