2017년 11월 17일 금요일

GEO CODE 2/2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Morpheus MAP</title>
 
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:600px;"></div>

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appKey=4d6f072271738cdd95b843dd68392c3d"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new daum.maps.LatLng(37.378853, 127.100844), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
var geocoder = new daum.maps.services.Geocoder();
</script>

</body>
</html>

다음 지도도 API 호출만 해주면 잘 된다. 그러면 생각해보자, 지도 표시 방법에는

WGS84 GRS80


도 있지만 (http://linuxism.tistory.com/833) 그 외에도 몇가지 된다.

중요한 것은 위도 경도 표시 방식이 최신이고 그 방식을 썼을 때 네이버, 다음, 구글의 GEO CODE를 이용하지 않고도 얼마든지 표시할 수 있다는 것이다.

가령

<!DOCTYPE html>
<html> 
<head> 
  <title>Morpheus MAP</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
          
              <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      textarea { width:300px;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 0px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        padding-left: 10px;
               }

    </style>
          
</head> 
<body>
  <div id="map" ></div>
  <script type="text/javascript">
    var locations = [
      ['디자인스타치과의원',37.5430607,126.95101729999999],
      ['중앙대학교병원 피부과',37.506792, 126.96080600000005],
      ['고운선형한의원(구,고운선형코앤비한의원)',35.126206, 129.10969599999999],
      ['목동경희한의원',37.5264266, 126.86312079999993],
      ['삼성서울치과의원',37.3281893, 127.91944850000004],
      ['오장균치과',37.4849065, 126.78352139999993],
      ['화이트드림치과(수원)',37.2632338, 127.03162109999994],
      ['H성형외과',37.5076053, 127.02247729999999],
      ['고대구로병원 성형외과',37.4922173, 126.88494779999996],
      ['오라클피부과',37.5258525, 127.02948100000003],
      ['화이트e치과 센텀',35.1681108, 129.1313169],
      ['서울류준하치과교정과치과의원',37.3185883, 126.83649130000003],
      ['케이스타(에버라인)성형외과',37.4977108, 127.0284388],
      ['편백미즈한의원',35.1589595, 129.11366610000005],
      ['Dental Bauhinia',22.5370746, 114.05026079999993],
      ['굿스마일치과(광명)',37.478831, 126.85447529999999],
      ['김명윤치과',37.431626, 127.12959219999993],
      ['서울바른이치과',37.5050014, 126.76469569999995],
      ['수성라임치과',35.8202485, 128.64165159999993],
      ['스마일민치과교정과',37.3895011, 126.95220259999996],
      ['차세대융합기술연구원',37.2981742, 127.04605889999993],
      ['청인한의원',37.2981742, 127.04605889999993],
      ['123교정치과',37.5130605, 127.10349500000007],
      ['노벨의원(인천주안점)',37.5130605, 127.10349500000007],
      ['더가지런한교정치과',37.612334, 127.030395],
      ['리본성형외과',37.51624049999999, 127.02100610000002],
      ['서울아산병원',37.526922, 127.10838100000001],
      ['서울웃는아이소아치과의원(구,서울보스톤고른이치과)',37.5143492, 127.11751300000003],
      ['서울유엔치과',37.5342451, 127.01008179999997],
      ['여건봉치과',37.5202063, 126.92944779999993],
      ['퍼스트치과',37.4986952, 127.02662940000005],
      ['그랑교정치과',37.5706648, 126.98168869999995],
      ['당신e빛나는치과',35.1933028, 129.06736419999993],
      ['더원치과',35.81404759999999, 128.5214459],
      ['맑은숲자향한의원',34.8942203, 128.69104859999993],
      ['메디스치과(서면)',35.1568741, 129.0581012],
      ['미올한의원',37.4966163, 127.02861889999997],
      ['서울클리어치과',37.6521458, 127.04645860000005],
      ['아성치과',35.2449383, 129.21423789999994],
      ['아이라인성형외과',37.5166254, 127.04054819999999],
      ['연세에스치과(구.에스치과의원)',37.3544519, 127.10562970000001],
      ['올곧은치과의원',37.6376074, 126.91755660000001],
      ['이끌림치과',36.6415416, 127.42807730000004],
      ['이바른치과교정과',37.367931, 127.106312],
      ['체리스마일치과',37.4804338, 126.95400210000003],
      ['홍성준치과',35.8268205, 127.14464939999993],
      ['후한의원(포바즈부산)',35.8268205, 127.14464939999993],
      ['we병원',33.2862403, 126.44410199999993],
      ['가지런한교정과치과(군산)',35.9660654, 126.71613200000002],
      ['경희대한방 사상체질',37.5534841, 127.15764680000007],
      ['고운치과(원주)',37.3299551, 127.94998759999999],
      ['그라벤의원',37.4986077, 127.02851620000001],
      ['김담희한의원',37.5071531, 127.02762499999994],
      ['뉴욕바른라인치과',37.5533809, 127.00937829999998],
      ['닥터스치과',35.9636378, 126.71515360000001],
      ['매직키스치과의원',37.5262971, 127.02745349999998],
      ['모두가원하는치과',37.00496800000001, 127.103926],
      ['미소모아치과',35.834164, 127.12047499999994],
      ['바른이치과의원(구미)',35.834164, 127.12047499999994],
      ['서울바른치과(동탄)',37.5166254, 127.04054819999999],
      ['서울바른치과교정과(청주)',36.6260303, 127.43339880000008],
      ['서울브라운치과',36.351559, 127.3883184],
      ['서울센트럴치과',37.5032606, 127.02377939999997],
      ['서울B&B치과',37.66635309999999, 127.05696030000001],
      ['센트럴연세치과',37.5034292, 127.00530980000008],
      ['슈바이처치과',37.5608307, 126.81174880000003],
      ['스마일가인치과',37.2658503, 127.03300039999999],
      ['어우름한의원',37.5042292, 126.75234669999998],
      ['얼굴에미소치과',37.7319629, 127.19419370000003],
      ['연세대보철과',37.565784, 126.93857200000002],
      ['움찬모발이식센터',37.524048, 127.028008],
      ['원데이치과',37.50166249999999, 127.02636280000002],
      ['원한의원',35.1900818, 128.11725009999998],
      ['임재범치과',37.268158, 127.00008400000002],
      ['정우선치과교정과',37.4935825, 127.06037409999999],
      ['톡스앤필(대구) ',35.8677672, 128.5939234],
      ['투명치과의원(울산)',35.5375769, 129.3307588],
      ['투명플러스치과',37.4914868, 126.722578],
      ['홍성치과의원',35.1431026, 129.10843180000006],
      ['화이트e치과 덕천',35.2107033, 129.00613829999998],
      ['81도치과교정과치과의원',37.4931369, 127.01301409999996]                          
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(36.4835543, 127.71697710000001),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>


요렇게 말이다.

문제는 변환이 노가다 ㅡㅡ;

그래서 주소 치고 바로 지오 코드 나오면, 클릭했을 때 위도 경도를 바로 선택하는 유틸리티 페이지를 만들었다. 코드에 IP도 나와 있지만 도메인도 연결했다.

http://morpheus3d.net/mapi/addr2geo.html

소스는 F12로 봐도 되겠지만 편하게...

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      textarea { width:300px;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 0px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        padding-left: 10px;
               }

    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input id="address" type="textbox" value="모르페우스">
      <input id="submit" type="button" value="Pin it!">
      <input type="button" value="GeoLocation" onclick="GeoLocation()">
      <textarea id="geoltxt" rows="1" cols="50" onclick="this.focus();this.select()" readonly="readonly"></textarea>
      <input type="button" value="Del" onclick="DelGeoLocation()">
    </div>
    <div id="map"></div>
    <script>
var geolocation = "";
function GeoLocation() {
document.getElementById("geoltxt").value = geolocation;
}

function DelGeoLocation() {
document.getElementById("geoltxt").value = "";
}

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 37.378853, lng: 127.100844}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });

      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;

        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
//            alert(address + '  ' + results[0].geometry.location);

    geolocation = results[0].geometry.location;

          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCcqpE94y1kvJd6jxJoqkoVSqpLNCLzog&callback=initMap">
    </script>
  </body>
</html>


암호화만 적용하면 되는데 난독화 -> 그래봤자 파싱 잘하면 됨.
단방향 암호화 -> 어차피 키는 들어감. 개인키 넣어두고 배꼈는지 안 배꼈는지 알아보는 방법도 괜찮겠지만 -> 데이터 뽑아서 자기껄로 만들면 끝.
암호화의 끝판왕은 키를 만들고 그 키를 BGA타입 칩에 집어 넣는건데(서버팀 회의 때 내가 설파한 5단계 암호화) 거기 까지 고려할 필요도 없다.

가장 좋은 것은 회사에게 필요한 자료만 가공해서 다른 데서 가져가도 쓸모없게 만드는 것이다. 더 좋은 방법은 쓸 때마다 우리 회사에 도움되게 만드는 것. 즉, 모든 병원 지도를 만들 필요 없다는 뜻.

도움 되길.
By -

댓글 없음:

댓글 쓰기

국정원의 댓글 공작을 지탄합니다.

피드 구독하기: 댓글 (Atom)

UPBIT is a South Korean company, and people died of suicide cause of coin investment.

 UPBIT is a South Korean company, and people died of suicide cause of coin. The company helps the people who control the market price manipu...

  • 산책 중...
    연휴 마지막날 아침... 산책을 하다 한장 찍어보았다. 인생도 마찬가지로 길의 끝을 모른체 선택을 해야하는 경우가 발생한다. 나중에 그 기준이 바뀔수도 있지만. 지금 기준은 많은 사람이 함께 갈 수 있는 길을 선택하고 싶다.
  • Native/transient/synchronized/volatile modifier
    □  native modifier 는 자바가 아닌 다른 언어로 작성된 코드를 자바에서 사용하기 위한 것 □  transient modifier 는 객체가 직렬 화되는 과정에서 해당 필드가 저장되지 않아야 한다는 것을 알리기 위해 사용 ...
  • Kosen
    제로보드 세팅.  sudo apt-get install apache2 mysql-server libapache2-mod-php5 phpmyadmin ssh 패키지를 이용한 소프트웨어 설치 - APM세팅 및 ssh 설치 ...