BLOG main image
분류 전체보기 (77)
프로젝트 (8)
IT소문 (9)
영화가주는인생 (5)
OpenAPI (9)
DBMS (5)
JAVA (16)
IPhone/Object-C (9)
안드로이드 (0)
WEB etc (8)
Server (1)
Michael Kors Handbags on Sale
Michael Kors Handbags on Sale
Nike Roshe Run
Nike Roshe Run
michael kors handbags outlet
michael kors handbags outlet
outlet de zapatillas nike
outlet de zapatillas nike
Cheap beats by dre uk
Cheap beats by dre uk
2,307,676 Visitors up to today!
Today 35 hit, Yesterday 215 hit
daisy rss
tistory
2010.11.16 20:44
구글맵에서 할 수 있는 일은 무수히 많은 거 같습니다.
어떤 서비스를 하느냐에 따라...대박이냐, 쪽박이냐에 차이점이겠죠?ㅋ
며칠 전에 동선 그리는 프로젝트기 있었는데. 그 일부를 블로그에 올려볼까 합니다.
그럼 즐프 하세요~^^

크게 3가지 액션으로 구분 하겠습니다.

첫째, 지도 클릭시 해당 위치에 마크를 표시한다.
둘째, 마크의 위치를 기준으로 동선을 그린다.
셋째, 마커를 클릭하면 해당 위치의 주소를 가져온다.



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

// 마크, 동선을 그리고 난 후 해당 위치를 array에 저장합니다.
var MarkersArray = [];
var Coordinates= [];
var travelPathArray = [];
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(33.397, 126.65544);
  var myOptions = {
  zoom: 10,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

google.maps.event.addListener(map, 'click', function(event) { 
  var marker = new google.maps.Marker({ 
  position: event.latLng, 
  map: map,
  title: '위치마커'
});
attachMessage(marker, event.latLng);
//선을 그리기 위해 좌표를 넣는다.
Coordinates.push( event.latLng );
//마커 담기
MarkersArray.push(marker);
        //array에 담은 위도,경도 데이타를 가지고 동선 그리기
flightPath();
});
}

//해당 위치에 주소를 가져오고, 마크를 클릭시 infowindow에 주소를 표시한다.
function attachMessage(marker, latlng) {
geocoder = new google.maps.Geocoder();
 geocoder.geocode({'latLng': latlng}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address_nm = results[0].formatted_address;
var infowindow = new google.maps.InfoWindow(
     { content: address_nm,
size: new google.maps.Size(50,50)
     });
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
 });
}
     } else {
alert('주소 가져오기 오류!');
     }
});
}

//동선그리기
function flightPath(){
for (i in travelPathArray){
travelPathArray[i].setMap(null);
}
var flightPath = new google.maps.Polyline({
path: Coordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.3,
strokeWeight: 2
});
flightPath.setMap(map);
travelPathArray.push(flightPath);
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:300px;"></div>
</body>
</html>



우선 전체 소스를 올려봅니다.
소스를 보시면,
1,2,3 파트에 있던거랑 + 동선을 그리기 위해서 new google.maps.Polyline 를 추가한거 밖에 없습니다.

new google.maps.Polyline에 옵션을 보면 
색,두께, 투명도,구분을 설정하여 선에 옵션을 줄 수가 있습니다.

* 저희 회사에서 운영중인 사이트 '트래비스타'에서 캡쳐한 사진입니다.

정말 3가지 액션으로 이루어졌나요?ㅋ
구글맵 API 는 사실상 code.google.co.kr 에 너무나 잘...그것도 한글로 정리가 되어있습니다.
굳이 블로그에 옮길 필요성을 못 느끼 겠더라구요..ㅋ
여튼 1~4 파트로 나눠서 너무나 기초적인 자료를 올려봤는데요.앞으로 더 삼빡한걸로 가져오겠습니다.ㅋㅋ

그럼 모두 즐프하세요~





저작자 표시
신고
이전 댓글 더보기
Joshuaen | 2015.01.22 23:10 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Matthewsy | 2015.01.23 00:02 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Enriqueui | 2015.01.23 08:16 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Matthewsy | 2015.01.23 09:14 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Williamgfy | 2015.01.23 10:06 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Georgetty | 2015.01.23 19:51 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Matthewsy | 2015.01.23 20:00 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Joshuaen | 2015.01.23 21:22 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Hermanio | 2015.01.23 21:33 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Matthewsy | 2015.01.24 06:50 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Enriqueui | 2015.01.24 20:09 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Matthewsy | 2015.01.25 04:20 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Joshuaen | 2015.01.25 06:28 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Enriqueui | 2015.01.25 06:39 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Georgetty | 2015.01.25 10:10 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Cameronji | 2015.01.25 16:44 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Joshuaen | 2015.01.26 05:28 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Joshuaen | 2015.01.26 17:18 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Thomasyi | 2015.01.26 23:53 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Williamgfy | 2015.01.27 05:37 | PERMALINK | EDIT/DEL | REPLY
이용약관위배로 관리자 삭제된 댓글입니다.
Name
Password
Homepage
Secret

티스토리 툴바