![[10] 서버와 연결된 위치표시 지도 PHP 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99656E3F5B30984114)
[10] 서버와 연결된 위치표시 지도 PHP 만들기IT/YOLO2018. 6. 25. 16:28
Table of Contents
앞서 GPS 좌표를 받아온 자료를 어떻게 쓰나 궁금해하셨을겁니다.
이제는 지도상에서 위치를 볼 수 있는 PHP파일을 하나 만들겁니다.
좌표값을 입력해주면 지도상에 GPS 좌표의 위치를 나타내주는 겁니다.
또한 위치저장 이라는 버튼을 누르면 서버와 연동된 SQL에 좌표값을 저장해주는 기능도 구현해보겠습니다.
지도를 표시하기 위해 구글 MAP의 API를 활용하였습니다.
명령어를 입력해주세요. root권한으로 로그인 하는 겁니다.
|
1 |
mysql -u root -p |
데이터베이스를 생성해주세요. (이름은 각자 다릅니다.)
|
1 |
create database db; |
db라는 database를 사용하기 위해서 명령어를 입력해주세요.
|
1 |
use db; |
저희가 만드려는건 폭력방지 이기때문에 fighting으로 database안에 table을 생성해주세요.
|
1
2
3
4
5 |
create table fighting(
id bigint(20) unsigned not null auto_increment,
name varchar(255) not null,
primary key (id)
) charset=utf8; |
생성이 된다면 Query OK,라는 문구가 보입니다. exit로 빠져나와 주세요.
|
1 |
sudo nano /home/j/www/maps.php |
이제 지도를 보기 위해 maps.php를 만들겁니다.
|
1
2 |
use db;
select * from db.fighting; |
경로는 상관없습니다. 사용자가 정한 경로에 만들어주세요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132 |
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
$link=mysqli_connect("localhost","root","개인 root 비밀번호","db");// localhost, root, 개인 root 비밀번호, db 순으로 입력하세요.
if (!$link)
{
echo "MySQL 접속 에러 : ";
echo mysqli_connect_error();
exit();
}
mysqli_set_charset($link,"utf8");
//POST 방식으로 데이터를 받아온다.
$name=isset($_POST['name']) ? $_POST['name'] : '';
if ($name !=""){
$sql="insert into fighting(name) values('$name')";
$result=mysqli_query($link,$sql);
if($result){
echo "SQL문 처리 성공";
}
else{
echo "SQL문 처리중 에러 발생 : ";
echo mysqli_error($link);
}
} else {
echo "데이터를 입력하세요 ";
}
mysqli_close($link);
?>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<meta name="description" content="지도에 주소표시 위도 경도 찾기 " />
<meta name="keywords" content="위도, 경도, 구글맵API, 구글맵 주소표시"/>
<meta name="author" content="webmaster@iegate.net">
<meta name="robots" content="ALL">
<meta name="revisit-after" content="1 week">
<meta name="rating" content="general">
<style>
body, p, input, button { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }
form { margin:0px; }
</style>
</head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAeU8PXsv-CcInm201SSTsdBRtLhwu-T2v9jUWMzzaOm0MN4E4txR7oQsv4whFmTZ49vjxhZ64Khjzqg" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(37.566535,126.9779692), 15);
geocoder = new GClientGeocoder();
map.disableDoubleClickZoom();
map.addControl(new GNavLabelControl());
map.addControl(new GSmallMapControl());
}
// 맵정보
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, 주소를 확인해 주세요!!");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
// place.address + '<br>' +
'<b>위도,경도:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>주소:</b>' + place.address);
// '<b>Status Code:</b>' + response.Status.code + '<br>' +
// '<b>Status Request:</b>' + response.Status.request + '<br>' +
// '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;">
<p>
<b>싸움이 일어난 곳의 위도와 경도를 입력하세요 :</b>
<input type="text" name="q" value="" class="address_input" size="40" method=post />
<input type="submit" name="find" value="Search" />
</p>
</form>
<form action="<?php $_PHP_SELF ?>" method="POST">
한번 더 입력하세요 : <input type = "text" name = "name" />
<input type = "submit" value="위치 저장"/>
</form>
<div id="map_canvas" style="width: 680px; height: 380px">
<div class="" style='overflow:hidden;text-align:center;border:1px solid #e1e1e1;width:680px;height:380px;margin-top:10px;padding-top:10px;margin-bottom:10px; '>
<img src='http://maps.google.com/maps/api/staticmap?center=&zoom=5&size=640x360&markers=icon:http://www.iegate.net/maps/images/ruby_point.png|,&sensor=false'></div>
</div>
<!--[if lt IE 7]>
<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 50px; position: relative;'>
<div style='font-size: 12px; font-weight: bold; margin-top: 12px;'>최신 브라우저로 지금 업그레이드 해주세요.<br/> IE6 이하 버젼에서는 지원되지 않는 기능이 있습니다.
</div>
</div>
<![endif]-->
</div>
</body>
</html> |
위 코드를 복사 후 ctrl + o를 눌러 저장하고 ctrl + x를 눌러 빠져나와주세요.
검색창에 입력해주시면 maps.php 파일에 대한 내용을 볼 수 있습니다.
결과
이와 같이 나오게 됩니다. 위도와 경도의 좌표값을 입력해주시고 Search를 눌러주시면 지도상에 표시가 되고 그 값을 저장하기 위해서는
'한 번 더 입력하세요'에 값을 적고 위치 저장을 하시면 "SQL문 처리 성공"이라는 문구와 Mysql에 저장이됩니다.
Mysql에서 저장된 좌표의 확인 방법 입니다.
|
1
2 |
use db;
select * from db.fighting; |
결과
이렇게 해서 구현하고자 하는 기능을 다 구현하였고 작품의 완성도도 생각했던 것 보다 더 높았습니다.
여기까지 봐주셔서 감사합니다.
'IT > YOLO' 카테고리의 다른 글
| [9] 아두이노를 활용한 GPS 출력 (2) | 2018.06.25 |
|---|---|
| [8] 아두이노를 활용한 부저 알람 (3) | 2018.06.25 |
| [7] YOLO Bounding Box 좌표를 서버로 전송하기 (9) | 2018.06.25 |
| [6] Ubuntu 16.04 APM(Apache2, PHP, Mysql) 설치 (0) | 2018.06.25 |
| [5] YOLO 데이터 학습 (51) | 2018.06.16 |
@주니- :: 주니
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
![[9] 아두이노를 활용한 GPS 출력](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99F510475B3090230B)
![[8] 아두이노를 활용한 부저 알람](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99D955435B30819420)
![[7] YOLO Bounding Box 좌표를 서버로 전송하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F990CAD465B30B62128)
![[6] Ubuntu 16.04 APM(Apache2, PHP, Mysql) 설치](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F996B264F5B307C7E13)