아두이노 NodeMCU 프로그램에서 다음 지도 API를 사용하여 스마트폰에서 지도 호출하는 문제를 이미 다루었으나 지도 표시에 있어서 중요한 요소 중의 하나인 마커 표시가 빠졌음을 지적한다.
이번 블로그에서는 기존 프로그램에 지정된 위도 경도 좌표 위치에 마커를 넣을 수 있도록 몇 줄의 코드 즉 아래에 빨간 색으로 표시된 부분을 소개하기로 한다.
이 예제 코드는 다음지도 api의 샘플 탭에 실려 있는 많은 예제 중의 하나이다.
varmapContainer=document.getElementById('map'),// 지도를 표시할 div
mapOption={
center:newdaum.maps.LatLng(33.450701,126.570667),// 지도의 중심좌표
level:3// 지도의 확대 레벨
};
varmap=newdaum.maps.Map(Container,Option);// 지도를 생성
// 여기까지 앞서 블로그에 올렸던 프로그램에 이미 포함되어 있음.
// 아래는 마커가 표시될 위도와 경도를 다시 지정함-블로그에서는 LAT[i]와 LON[i] 사용
varmarkerPosition =newdaum.maps.LatLng(33.450701,126.570667);
// 마커를 생성합니다
varmarker=newdaum.maps.Marker({
position:markerPosition
});
// 마커가 지도 위에 출력 설정
marker.setMap(map);
위 4줄의 코드를 아두이노 방식으로 바꾸어서 입력하여 결과를 확인해 보자.
아래는 수정된 프로그램을 참조하여 본인의 스마트폰 핫스팟을 사용하여 실행시켜 보자.
Webserver_nodemcu_daum_api_html_css_02
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1994";
const char* password = "00000000";
//Latitude, Longgitude coordinate data
float LAT[5] ={37.300710,37.300710,37.300710,37.300710,37.300710};
float LON[5] ={127.09937,127.19937,127.29937,127.39937,127.49937};
int ledPin = 2; //
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
// Set WiFi to station mode and disconnect from an AP if it was previously connected
WiFi.mode(WIFI_STA);
WiFi.disconnect();
delay(100);
Serial.println("Setup done");
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
for( int i=0; i<5;i++){
int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
Serial.print(request.indexOf("/LED=ON"));
digitalWrite(ledPin, LOW);
value = HIGH;
}
// Set ledPin according to the request
// Return the response
client.println("<!DOCTYPE HTML>");
client.println("<html>");
//배경 색 문자 색 사이즈 HTML CSS 설정
client.println("<head>");
client.println("<style>");
client.println("body {");
client.println("background-color: lightblue;");
client.println("}");
client.println("p {");
client.println("color:red;");
client.println("font-size:250%;");
client.println("}");
//버튼 HTML CSS 설정
client.println(".button {");
client.println("background-color: #4CAF50;");
client.println("border: none;");
client.println("color: white;");
client.println("padding: 15px 32px;");
client.println("text-align: center;");
client.println("text-decoration: none;");
client.println("display: inline-block;");
client.println("font-size: 20px;");
client.println("margin: 14px 20px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<div id='map' style='width:500px;height:400px;'></div>");
client.println("<script type='text/javascript' src=");
client.println("'//apis.daum.net/maps/maps3.js?apikey=45f783183180bfecd2255ac44da82733 '></script>");
client.println("<script>");
client.println("var container = document.getElementById('map');");
client.println("var options = {");
//37.300710, 127.09937
client.println("center: new daum.maps.LatLng(");
client.print(LAT[i],DEC);
client.print(", ");
client.print(LON[i],DEC);
client.println("),");
client.println("level: 7");
client.println("};");
client.println("var map = new daum.maps.Map(container, options);");
// 지도 마커 위치표시, 생성, 출력 설정
client.println("var markerPosition = new daum.maps.LatLng(");
client.print(LAT[i],DEC);
client.print(", ");
client.print(LON[i],DEC);
client.println(");");
client.println("var marker = new daum.maps.Marker({position: markerPosition});");
client.println("marker.setMap(map);");
client.println("</script>");
//client.println("<input type='button' value='Refresh' onclick=\"location.href='./'\" style='width:200px;height:100px;'>");
client.println("<a href=\"/LED=ON\"\" class='button'>Refresh </button></a>");
client.println("</body>");
client.println("</html>");
delay(10000);
}
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
// 지도 마커 위치표시, 생성, 지도위 설정
client.println("var markerPosition = new daum.maps.LatLng(");
client.print(LAT[i]);
client.print(", ");
client.print(LON[i]);
client.println(");");
client.println("var marker = new daum.maps.Marker({position: markerPosition});");
client.println("marker.setMap(map);");
신갈지역 지도 중심의 위도 경도 좌표 위치에 빨간 동그라미로 표시한 범위에 마커가 표시되었다.
앞으로 코딩이 이루어져야 할 목표는 드론이든 사람이든 GPS를 지참하고 출발점에서 도착지점까지 경로를 지도에 나타내는 작업이 되어야 할 것이다.
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU에서 그림파일 불러오는 HTML img 태그 사용법 (0) | 2017.02.20 |
|---|---|
| 삼색 LED에 의한 아두이노 NodeMCU에서 인터럽트 가능한 핀 확인 실험 (0) | 2017.02.18 |
| HTML SVG 그래픽 언어로 프로그램한 Arduino NodeMCU Scope에 의해 아날로그 파형 및디지털 듀티 신호 real time 측정 (0) | 2017.02.15 |
| Blink LED 코드를 이용한 Arduino NodeMCU Scope용 디지털 듀티 신호 생성 (0) | 2017.02.15 |
| HTML SVG 그래픽 언어 사용 NodeMCU WiFi Webserver 코딩에 의한 가변저항 전압 스마트폰 실시간 모니터링 프로그램 (0) | 2017.02.12 |