2013. 12. 21. 12:32ㆍ구글강좌
구글맵에 오버레이을 넣어 영역표시하기
구글지도 위에는 다양한 Overlay 클래스들을 통해 지도 위에 자신이 원하는 것들을 올려서 정보를 표시할 수 있다. 경로 표시 직선인 Polyline 직선을 overlay object를 지도 위에 표시한 형식으로 나타낼 수 있다. 예를들면 특정지역을 표시하기 위해 Polygon이라는 다각형 object를 이용 지도 위에 다각형을 그릴 수 있는데 각점을 연결하는 점을 통해 그려 나간다. 이점이 바로 위도와 경도에 해당하는 좌표이기도 하다. 그리고 이 점들을 연결하는 선의 색상이나 채우기색상, 투명도등을 옵션에 넣어서 표시해 나갈 수 있다.
=====================================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html { height : 100% }
body { height : 100%; margin: 3% 0% 0% 1.5%; padding: 0 }
#map_canvas { height : 100% }
</style>
<script type = "text/javascript"
src = "http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type = "text/javascript">
function initialize(){
var latlng = new google.maps.LatLng(37.609676, 127.074305);
var myOptions = {
zoom: 15,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var triangleCoords = [
new google.maps.LatLng(37.612056, 127.077309),
new google.maps.LatLng(37.609897, 127.077738),
new google.maps.LatLng(37.609421, 127.073039)
];
YeouidoTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.5
});
YeouidoTriangle.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:60%"></div>
</body>
</html>
================================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html { height : 100% }
body { height : 100%; margin: 3% 0% 0% 1.5%; padding: 0 }
#map_canvas { height : 100% }
</style>
<script type = "text/javascript"
src = "http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type = "text/javascript">
function initialize(){
var latlng = new google.maps.LatLng(37.609676, 127.074305);
var myOptions = {
zoom: 15,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//----------------------------------------------------------------------------
//아래의 세 개의 좌표들은 폴리곤의 꼭지점이다.
var triangleCoords = [
new google.maps.LatLng(37.612056, 127.077309),
new google.maps.LatLng(37.609897, 127.077738),
new google.maps.LatLng(37.609421, 127.073039)
];
//저는 먹골역위에 삼각형을 그리고 싶어서 세 점의 좌표로 구성된 배열을 만들어 Polygon의꼭지점들의 배열을 만들었다. 만약 사각형으로 하고자 할 경우에는
var triangleCoords = [
new google.maps.LatLng(37.61158,127.072867),
new google.maps.LatLng(37.612056, 127.077309),
new google.maps.LatLng(37.609897, 127.077738),
new google.maps.LatLng(37.609421, 127.073039)
];
//YeouidoTriangle이라는 Polygon object를 생성합니다.
YeouidoTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.5
});
//path는 위에 만든 세 점의 좌표 배열을 사용해, 삼각형의 경로를 지정한다.
//색상(strokeColor), 투명도(strokeOpacity), 두께(StrokeWeight)를 지정한다.
//채우기 색상(fillColor), 투명도(fillOpacity)도 지정한다.
//투명도는 0~1 사이의 수로 투명한 정도를 설정하고,
//색상은 16진수 HTML 색상 포맷을 사용하고, 두께는 픽셀(Pixel) 단위로 표시한다.
YeouidoTriangle.setMap(map);
//setMap() 함수로 기존의 지도 위에 사각형을 올려놓는다.
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:60%"></div>
</body>
</html>
=============================================
관련자료 :
http://code.google.com/intl/en/apis/maps/documentation/javascript/overlays.html#Polygons
'구글강좌' 카테고리의 다른 글
| [구글오피스 연재01] 구글을 통해 스마트모바일 오피스구축하기 (1) | 2013.12.25 |
|---|---|
| 안드로이드 사용자들을 위한 구글러앱 다운로드받기 (0) | 2013.12.22 |
| 웹페이지에 Google maps API을 사용하여 googlemap으로 표시하기 (0) | 2013.12.21 |
| [퍼온글] 구글맵과 퓨젼테이블 영문자료 (0) | 2013.12.21 |
| 네이버맵 api을 통해 지도만들기(키 값만들기중심으로) (0) | 2013.12.20 |