HTML 구글맵. C# + 안드로이드 = 실시간 마커 갱신 (+MySql)

HTML 구글맵. C# + 안드로이드 = 실시간 마커 갱신 (+MySql)


안드로이드에서 좌표를 전송하면, C#으로 구현된 서버에서 값을 받아 MySql로 저장한 뒤, 해당 데이터들을 html 구글맵에 반영합니다.


순서는, 안드로이드 앱 -> C# -> MySql -> HTML이 되겠죠.


언어 3개를 함께 사용하기에 복잡할지도 모르겠으나, 기본적인 문법만 안다면 누구나 할 수 있습니다. 일단, map.html 파일입니다.


<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml"> <head>
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
 
      var map;
      var marker1;
      var line;
      var path;
 
      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
        map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.79116126.994997),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },          navigationControl: true,
          navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
          }
        });
      }
 
      function addMarker(x, y){ // 마커 추가
        marker1 = new google.maps.Marker();
        marker1.setPosition(new google.maps.LatLng(x, y));
        marker1.setMap(map);
      }
 
      function removeMarker(){ // 마커 제거
        marker1.setVisible(false);
        line.setVisible(false);
      }
 
      function setLine(x1, y1, x2, y2) { // 마커 사이의 라인 추가
        //path = [new google.maps.LatLng(x1, y1), new google.maps.LatLng(x2, y2)];
        path.getPath =
                [new google.maps.LatLng(x1, y1), new google.maps.LatLng(x2, y2)];
      }      function addLine(){
          line = new google.maps.Polyline({
          path: path,
          strokeColor: '#ff0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        line.setMap(map);
      }
 
            google.maps.event.addDomListener(window'load', initialize);
    </script>  </head>
  <body style="font-family: Arial; border: 0 none;">
    <div id="map-canvas"
 style="width: 500px; height: 400px"></div>
  </body></html>
cs


가장 큰 특징은, 구글맵이 버전 3으로 넘어오면서, 인증키를 요구하지 않는다는 점입니다.

그리고 소스를 보면, 마커의 추가, 삭제, 라인의 추가, 삭제를 function으로 구분해 놨습니다. 위에서부터 순차적으로 읽어 내려가시면 됩니다. 이후에 안드로이드 앱을 제작하면 돼요.


참고로 저처럼 HTML 태그가 익숙하지 않은 분들은 기본 HTML 문법을 먼저 살펴보시길 권합니다. 저도 그걸 안 보고 진행하려다 시간을 많이 까먹었네요. 좋지 않은 과정이었습니다.


이어서, C#에서는 HTML Element를 사용하여, 구글맵에 마커를 추가하기 위해 아래와 같이 구성합니다.


con.ConnectionString =
    "Data Source=localhost;Database=car;User id=root;Password=123456"
     + ";charset=euckr";
 
con.Open();
com = new MySqlCommand("Select * from abcd", con);
 
= com.ExecuteReader();
 
while (R.Read()) {
    abcd_la.Add(R["la"]);
    abcd_lo.Add(R["lo"]);
}
 
for (int i = 1; i < abcd_la.Count; i++) {
    webBrowser1.Document.InvokeScript("setLine",
    new object[] { abcd_la[i-1], abcd_lo[i-1], abcd_la[i], abcd_lo[i] });
}
 
webBrowser1.Document.InvokeScript("addMarker",
    new object[] { abcd_la[abcd_la.Count-1], abcd_lo[abcd_lo.Count-1] });
 
webBrowser1.Document.InvokeScript("addLine",
    new object[] { abcd_la[abcd_la.Count - 1], abcd_lo[abcd_lo.Count - 1] });
 
    R.Dispose();
    com.Dispose();
    con.Close();
    con.Dispose();
cs


webBrowser1.Document.InvokeScript를 이용해서 HTML 내부의 function을 제어합니다.

그저, 인자값만 넘겨주면 됩니다. 제어 방법은 매우 쉽게 구현할 수 있습니다. 바로 위에처럼 말이죠.


C#과 안드로이드 간 TCP만 가볍게 구현하면, 어플을 이용해서 C#에서 로딩하는 구글맵에 실시간으로 마커와 라인을 그리는 것이 가능해집니다.


HTML 실시간 마커 갱신HTML 실시간 마커 갱신


뭐... 거치는 과정이 조금 길다뿐이지, 결코, 구현 자체가 어렵지 않습니다. 저런 기본 화면을 띄운 다음, 안드로이드 어플에서 "37.34534,127.345345"와 같은 스트링을 날려보세요.


아마도 마커가 떡하니 찍히게 될겁니다.


HTML 구글맵. C# + 안드로이드 = 실시간 마커 갱신 (+MySql)

댓글(0)

Designed by JB FACTORY