| 좌표계 | WGS84 |
|---|---|
| 모바일 사용환경 | 애플 아이폰(Apple IPhone) IOS / UTM-K 안드로이드 (Google / Android) |
| 경로 검색 엔진 | OpenStreetMap / Gosmore / Routing Instruction |
| 지원하는 브라우져(Compatible Browsers) | 인터넷 익스플로러 (Internet Explorer) 6 이상 / 모질라 파이어폭스 (Mozilla Firefox) 3 이상 / 애플 사파리 (Apple Safari) 5 이상 / UTM-K 크롬 (Goolge Chrome) 5 이상 / 오페라 (Opera) 10 이상 |
지도가 위치할 HTML 엘리먼트를 배치하고 크기를 설정한다. 지도를 사용하기 위해서 등록한 API키를 통해 API라이브러리를 불러온다.
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
// 중심좌표 설정
var lonLat = new OpenLayers.LonLat(126.978245, 37.566546);
lonLat.transform(projWGS84, projUTMK);
// create map object
map = new TRITOPS.TTMap("map", {
center: lonLat,
zoom: 9
});
});
//]]>
</script>
<style type="text/css">
/** 사용자 줌 스타일 관련 css */
div.olControlZoomPanel .olControlZoomInItemInactive, div.olControlZoomPanel .olControlZoomOutItemInactive{
background: rgba(0, 0, 0, 0.2);
position: absolute;
}
div.olControlZoomPanel .olControlZoomInItemInactive{
background: url(./images/map_plus.png) no-repeat;
width: 27px;
height: 27px;
}
div.olControlZoomPanel .olControlZoomOutItemInactive{
background: url(./images/map_minus.png) no-repeat;
width: 27px;
height: 27px;
}
</style>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 마우스로 지도 이동시 자연스러운 움직임 효과 여부
map.addControl(new OpenLayers.Control.Navigation({dragPanOptions: { enableKinetic: true} }));
// 사용자 줌 컨트롤 위치
map.addControl(new OpenLayers.Control.ZoomPanel({ "position": new OpenLayers.Pixel(10, 10) }));
// 기본으로 설정된 줌 관련 css
$("div.olControlPanZoomBar,div.olControlZoomToMaxExtentItemInactive").css("display", "none");
});
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 지도 이동하기
function moveCenter(type){
// 이동할 지점의 좌표
var point = new OpenLayers.LonLat(126.976872, 37.578042);
point.transform(projWGS84, projUTMK);
if(type == 1){ // 중심점 이동하기
map.setCenter(point);
} else if(type == 2){ // 중심점 부드럽게 이동하기
map.panTo(point);
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 마커 올리기
function addMarker(){
// 기본 마커
var marker1 = map.addMarkerPopup(lonLat.lon, lonLat.lat);
marker1.id = "marker_1";
// 사용자 정의 마커
var point = new OpenLayers.LonLat(126.988802, 37.564879);
point.transform(projWGS84, projUTMK);
var size = new OpenLayers.Size(48, 48);
var selectedIcon = new OpenLayers.Icon("images/select-arrow2.gif", size);
var marker2 = map.addMarkerPopup(point.lon, point.lat, {
icon: selectedIcon
});
marker2.id = "marker_2";
}
// 마커 지우기(전체, 특정마커)
function removeMarker(id){
var markers = map.layerMap.MARKER; // all markers
if(id == "all"){ // 전체
markers.removeAllMarker();
} else{ // 특정아이디 마커
var marker = markers.getMarkerById(id);
if(marker){
markers.removeMarker(marker);
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var sign = null; // 푯말 object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 푯말 설정
sign = new TRITOPS.Control.SignPoint({
signCallback: signCallback // callback function
});
map.addControl(sign);
});
// 푯말찍기 활성화
var signActivate = function(){
sign.activate();
}
// 푯말찍기 비활성화
var signDeactivate = function(){
sign.deactivate();
var obj = $("div#result"); // jQuery selector
obj.empty();
}
// 푯말찍기 callback function
var signCallback = function(e){
var geom = e.geometry;
obj.html("경도: "+geom.x+", 위도: "+geom.y);
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 좌표 변환하기
function transCoords(type){
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
if(type == 0){ // 경위도 좌표 → UTM-K 좌표 변환
var lonLat = new OpenLayers.LonLat(126.978245, 37.566546);
lonLat.transform(projWGS84, projUTMK);
} else if(type == 1){ // UTM-K 좌표 → 경위도 좌표 변환
var lonLat = new OpenLayers.LonLat(14133713.213004, 4518230.6056297);
lonLat.transform(projUTMK, projWGS84);
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 마커 이미지 사이즈
var size = new OpenLayers.Size(48, 48);
// 마커 이미지
var selectedIcon = new OpenLayers.Icon("images/select-arrow2.gif", size);
var lonLat = new OpenLayers.LonLat(126.978245, 37.566546);
lonLat.transform(projWGS84, projUTMK);
// 마커 추가
var marker1 = map.addMarkerPopup(lonLat.lon, lonLat.lat, {
icon: selectedIcon,
popupContentHTML: "아이콘 변경",
closeBox: true,
panMapIfOutOfView: false
});
// marker popup object
var popMarker1 = marker1.feature.popup;
// marker popup offset 설정
popMarker1.anchor = {
size: new OpenLayers.Size(0, 0),
offset: new OpenLayers.Pixel((size.w/2), 0)
};
// 위치 고정 - br(bottom right), tr(top right), tl(top left), bl(bottom left)
popMarker1.calculateRelativePosition = function(px){
return "br";
}
// 마커이벤트 설정 - 마커표시와 동시에 팝업도 보이도록
marker1.events.triggerEvent("mousedown", null);
var lonLat2 = new OpenLayers.LonLat(126.964598, 37.559810);
lonLat2.transform(projWGS84, projUTMK);
// 마커 추가
var marker2 = map.addMarkerPopup(lonLat2.lon, lonLat2.lat, {
popupContentHTML: "<div style="width:170px;padding:4px;border:solid 1px #c4370e;">팝업응용 - 클릭, 터치 이벤트 추가</div>",
closeBox: false
});
marker2.events.triggerEvent("mousedown", null);
// 클릭 이벤트 함수 호출
initPopup(marker2.feature.popup);
});
// 팝업 클릭 이벤트 함수
var initPopup = function(pop, eventFun){
if(!eventFun){
eventFun = function(e){
var marker = e.object;
var popup = marker.feature.popup;
map.removePopup(popup);
popup.hide();
OpenLayers.Event.stop(e, true);
}
}
// 이벤트 추가
pop.events.on({
click: eventFun,
touchstart: eventFun
});
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
var lonLat = new OpenLayers.LonLat(126.935502, 37.587021);
lonLat.transform(projWGS84, projUTMK);
var marker1 = map.addMarkerPopup(lonLat.lon, lonLat.lat);
var lonLat2 = new OpenLayers.LonLat(126.935502, 37.587021);
lonLat2.transform(projWGS84, projUTMK);
var marker2 = map.addMarkerPopup(lonLat2.lon, lonLat2.lat);
var lonLat3 = new OpenLayers.LonLat(127.053390, 37.517988);
lonLat3.transform(projWGS84, projUTMK);
var marker3 = map.addMarkerPopup(lonLat3.lon, lonLat3.lat);
// 마커레이어
var markerLayer = map.layerMap.MARKER;
// 마커레이어 영역 가져오기
var ex = markerLayer.getDataExtent();
if(ex != null){
// 마커레이어 영역으로 다시 설정
map.zoomToExtent(ex);
}
});
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 이벤트 설정
map.events.register("moveend", map, function(e){
var center = map.getCenter();
var wgsCenter = center.clone();
wgsCenter.transform(projUTMK, projWGS84);
var html = "WGS84 - 경도 : "+wgsCenter.lon.toFixed(6) + ", 위도 : "+wgsCenter.lat.toFixed(6);
html += " / UTM-K좌표 - 경도 : "+center.lon + ", 위도 : "+center.lat;
$("div#result").html(html);
});
});
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 지번주소 검색
function searchAddr(){
var pg = '1'; // 페이징 관련 변수는 문자열로 입력을 받습니다.
var ps = '10';
var data = {
start: pg, // 현재 페이지
rows: ps, // 페이징 크기
word: $("#search_addr").val()
};
map.searchAddr(data, resultSearchAddr);
}
// 지번주소 검색 callback function
var resultSearchAddr = function(result){
var geojsonFormat = new OpenLayers.Format.GeoJSON();
var collection = geojsonFormat.read(result);
var properties = result.properties;
if(properties){
if(properties.status == 'error'){
alert(properties.statusDetail);
} else{
if(collection.length > 0){
for(var i=0; i<collection.length; i++){
var feat = collection[i];
feat.geometry.transform(map.displayProjection, map.getProjectionObject());
/**
* 지번 정보
* sido: 시/도, sigungu: 시/군/구, gu: 구, lawEmd: 법정동, admEmd: 행정동, li: 리, bunji: 번지, ho: 호
* roadName: 도로명, roadNo1: 건물 주번호, roadNo2: 건물 부번호
*/
var data = feat.data;
// 지번주소
var jibunAddr = data.sido + " " + data.sigungu;
if(data.gu){
jibunAddr += " " + data.gu;
}
// 법정동
jibunAddr += " " + data.lawEmd;
if(data.li && data.li.length > 0){
jibunAddr += " " + data.li;
}
if(data.bunji && data.bunji.length > 0){
if(data.isSan){
jibunAddr += " 산";
}
if(data.bunji && data.bunji != "0"){
jibunAddr += " " + data.bunji;
}
if(data.ho && data.ho.length > 0){
jibunAddr += "-" + data.ho;
}
if(data.bunji && data.bunji != "0"){
jibunAddr += " 번지";
}
}
var title = data.lawEmd;
// 도로명 주소
var roadAddr = "";
if(data.roadName && data.roadName.length > 0){
title += " / " + data.roadName;
roadAddr += data.sido + " " + data.sigungu + " " +data.gu;
roadAddr += " " + data.roadName + " " + data.roadNo1;
if(data.roadNo2 && data.roadNo2 != "0"){
roadAddr += " - " + data.roadNo2;
}
}
// 위치찍기
var popHtml = "";
popHtml += "<div class=\"marker_popup\">";
popHtml += " <div class=\"marker_popup_1\">"+title+"</div>";
popHtml += " <div class=\"marker_popup_2\">"+jibunAddr+"<br />"+roadAddr+"</div>";
popHtml += "</div>";
var marker = map.addMarkerPopup(feat.geometry.x, feat.geometry.y, {popupContentHTML:popHtml, closeBox:false});
marker.icon.imageDiv.style.cursor = "pointer";
marker.events.triggerEvent("mousedown", null);
var ex = map.layerMap.MARKER.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
map.setCenter(ex.getCenterLonLat());
}
}
} else{
alert("검색결과가 없습니다.");
}
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 우편번호로 지번주소 검색
function searchAddrByZipcode(){
var zip1 = $("#zip_1").val();
var zip2 = $("#zip_2").val();
var bunji = $("#bunji").val();
var ho = $("#ho").val();
var addr = {
zipcode: zip1+zip2,
bunji: bunji,
ho: ho,
isSan: "0"
};
map.searchAddr(addr, resultSearchAddrByZipcode);
}
// 우편번호로 지번주소 검색 callback function
function resultSearchAddrByZipcode(result){
var geojsonFormat = new OpenLayers.Format.GeoJSON();
var collection = geojsonFormat.read(result);
var properties = result.properties;
if(properties){
if(properties.status == 'error'){
alert(properties.statusDetail);
} else{
if(collection.length > 0){
for(var i=0; i<collection.length; i++){
var feat = collection[i];
feat.geometry.transform(map.displayProjection, map.getProjectionObject());
/**
* 지번 정보
* sido: 시/도, sigungu: 시/군/구, gu: 구, lawEmd: 법정동, admEmd: 행정동, li: 리, bunji: 번지, ho: 호
* roadName: 도로명, roadNo1: 건물 주번호, roadNo2: 건물 부번호
*/
var jibun = feat.data;
// 지번주소
var jibunAddr = jibun.sido + " " + jibun.sigungu + " " + jibun.gu;
// 법정동
jibunAddr += jibun.lawEmd;
if(jibun.li && jibun.li.length > 0){
jibunAddr += " " + jibun.li;
}
if (jibun.bunji && jibun.bunji.length > 0) {
if(jibun.isSan){
jibunAddr += " 산";
}
jibunAddr += " " + jibun.bunji;
if(jibun.ho && jibun.ho.length > 0){
jibunAddr += "-" + jibun.ho;
}
jibunAddr += " 번지";
}
// 위치찍기
var popHtml = "<div>"+jibunAddr+"</div>";
var marker = map.addMarkerPopup(feat.geometry.x, feat.geometry.y, {popupContentHTML:popHtml, closeBox:false});
marker.events.triggerEvent("mousedown", null);
var ex = map.layerMap.MARKER.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
map.setCenter(ex.getCenterLonLat());
}
}
} else{
alert("검색결과가 없습니다.");
}
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 도로명주소 검색
function searchAddrRoad(){
var sido = $("#sido").val();
var sigungu = $("#sigungu").val();
var roadNm = $("#rd_nm").val();
var roadNo1 = $("#rd_no1").val();
var roadNo2 = $("#rd_no2").val();
var data = {
sido: sido,
sigungu: sigungu,
roadName: roadNm,
roadNo1: roadNo1,
roadNo2: roadNo2
};
map.searchAddrRoad(data, resultSearchAddrRoad);
}
// 도로명주소 검색 callback function
function resultSearchAddrRoad(result){
var geojsonFormat = new OpenLayers.Format.GeoJSON();
var collection = geojsonFormat.read(result);
var properties = result.properties;
if(properties){
if(properties.status == 'error'){
alert(properties.statusDetail);
} else{
if(collection.length > 0){
for(var i=0; i<collection.length; i++){
var feat = collection[i];
feat.geometry.transform(map.displayProjection, map.getProjectionObject());
var road = feat.data;
// 지번주소
var jibunAddr = road.sido + " " + road.sigungu + " " + road.gu;
jibunAddr += " " + road.lawEmd;
if(road.li && road.li.length > 0){
jibunAddr += " " + road.li;
}
if(road.bunji && road.bunji.length > 0){
if(road.isSan){
jibunAddr += " 산";
}
jibunAddr += " " + road.bunji;
if (road.ho && road.ho != "0"){
jibunAddr += "-" + road.ho;
}
jibunAddr += " 번지";
}
// 도로명 주소
var roadAddr = "";
if(road.roadName && road.roadName.length > 0){
roadAddr += road.sido + " " + road.sigungu + " " +road.gu;
roadAddr += " " + road.roadName + " " + road.roadNo1;
if(road.roadNo2 && road.roadNo2 != "0"){
roadAddr += " - " + road.roadNo2;
}
}
// 위치찍기
var popHtml = "";
popHtml += "<div>";
popHtml += " <div>"+road.roadName+"</div>";
popHtml += " <div>"+roadAddr+"<br />"+jibunAddr+"</div>";
popHtml += "</div>";
var marker = map.addMarkerPopup(feat.geometry.x, feat.geometry.y, {popupContentHTML:popHtml, closeBox:false});
marker.events.triggerEvent("mousedown", null);
var ex = map.layerMap.MARKER.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
map.setCenter(ex.getCenterLonLat());
}
}
} else{
alert("검색결과가 없습니다.");
}
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
});
// 명칭 검색
function searchPoi(){
var pg = '1'; // 페이징 관련 변수는 문자열로 입력을 받습니다.
var ps = '10';
var data = {
start: pg, // 현재 페이지
rows: ps, // 페이징 크기
word: $("#search_word").val()
};
map.searchPoi(data, resultSearchPoi);
}
// 명칭 검색 callback function
function resultSearchPoi(result){
var geojsonFormat = new OpenLayers.Format.GeoJSON();
var collection = geojsonFormat.read(result);
var properties = result.properties;
if(properties){
if(properties.status == 'error'){
alert(properties.statusDetail);
} else{
if(collection.length > 0){
for(var i=0; i<collection.length; i++){
var feat = collection[i];
feat.geometry.transform(map.displayProjection, map.getProjectionObject());
/**
* 지번 정보
* sido: 시/도, sigungu: 시/군/구, gu: 구, lawEmd: 법정동, admEmd: 행정동, li: 리, bunji: 번지, ho: 호
* roadName: 도로명, roadNo1: 건물 주번호, roadNo2: 건물 부번호
*/
var data = feat.data;
// 지번주소
var jibunAddr = data.sido + " " + data.sigungu;
if(data.gu){
jibunAddr += " " + data.gu;
}
// 법정동
jibunAddr += " " + data.lawEmd;
if(data.li && data.li.length > 0){
jibunAddr += " " + data.li;
}
if (data.bunji && data.bunji.length > 0) {
if(data.isSan){
jibunAddr += " 산";
}
if(data.bunji && data.bunji != "0"){
jibunAddr += " " + data.bunji;
}
if(data.ho && data.ho.length > 0){
jibunAddr += "-" + data.ho;
}
if(data.bunji && data.bunji != "0"){
jibunAddr += " 번지";
}
}
// 도로명 주소
var roadAddr = "";
if(data.roadName && data.roadName.length > 0){
roadAddr += data.sido + " " + data.sigungu + " " +data.gu;
roadAddr += " " + data.roadName + " " + data.roadNo1;
if(data.roadNo2 && data.roadNo2 != "0"){
roadAddr += " - " + data.roadNo2;
}
}
var title = data.name;
// 위치찍기
var popHtml = "";
popHtml += "<div>";
popHtml += " <div>"+title+"</div>";
popHtml += " <div>"+jibunAddr+"<br/>+roadAddr+"</div>";
popHtml += "</div>";
var marker = map.addMarkerPopup(feat.geometry.x, feat.geometry.y, {popupContentHTML:popHtml, closeBox:false});
var ex = map.layerMap.MARKER.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
map.setCenter(ex.getCenterLonLat());
}
}
} else{
alert("검색결과가 없습니다.");
}
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
map.cns = new TRITOPS.Control.Cns({
position: new OpenLayers.Pixel(50, 0), // 출발, 도착 패널 위치
onCompleted: resultCNS // 경로검색 결과 callback function
});
map.addControl(map.cns);
});
// 출발지 선택
function setStartCns(){
map.cns.sourcePoint.activate();
}
// 도착지 선택
function setEndCns(){
map.cns.destinationPoint.activate();
}
// 경유지 추가
function setRouteCns(){
map.cns.addRoutePoint(lonLat.lon, lonLat.lat);
}
// 특정 경유지 삭제
function removeRoutes(idx){
map.cns.removeRoutePoint(idx);
}
// 경유지 전부 삭제
function removeAllRoutes(){
map.cns.removeAllRoutePoint();
}
// 경로검색
var resultCNS = function(){
// 경로검색
var start = map.cns.sourcePoint.vector.geometry;
var end = map.cns.destinationPoint.vector.geometry;
if(start == null){
alert("출발지점을 선택 또는 검색해 주십시요.");
setStartCns();
return false;
} else if(end == null){
alert("도착지점을 선택 또는 검색해 주십시요.");
setEndCns();
return false;
}
var bool = map.cns.search(function(data){
// 길찾기 시작
if($.type(data) != "undefined"){
var geojson_format = new OpenLayers.Format.GeoJSON();
var collection = geojson_format.read(data);
var cnsPanel = map.cns;
if(data.properties){
if(data.properties.status == 'error'){
if(data.properties.statusDetail == '출발지 이상'){
cnsPanel.pinShow(cnsPanel.destinationPoint.vector);
cnsPanel.sourcePoint.activate();
} else if(data.properties.statusDetail == '도착지 이상'){
cnsPanel.pinShow(cnsPanel.sourcePoint.vector);
cnsPanel.destinationPoint.activate();
}
// 경로검색 실패
alert("경로검색에 실패하였습니다.");
} else{
var tempArr = [];
var prop = null;
var cnsType = null;
// 총거리
var totalDist = data.properties.distance / 1000;
totalDist = totalDist.toFixed(2);
var totalTime = data.properties.time;
for(var i=0; i<collection.length; i++){
collection[i].geometry.transform(map.displayProjection, map.getProjectionObject());
prop = collection[i].data;
cnsType = prop.cnsType;
if(cnsType == "yudo"){
var road = prop.codeDetail; // 도로명
road = road.replace("으로", "로");
// 유도지점 마우스 오버시
var yudoTitle = road.substring(0, road.indexOf(" "));
if(!isNaN(yudoTitle)){
yudoTitle = yudoTitle + "번 도로";
road = yudoTitle + road.substring(road.indexOf(" ")+1);
}
yudoTitle = (prop.index)+". "+yudoTitle;
var popDivW = fnGetByteLen(yudoTitle) * 6;
collection[i].data.overContentHtml = "<div style=\"padding:4px;background-color:#fff;border:solid 1px #000;\">"+yudoTitle+"</div>";
collection[i].enabledHover = true;
} else if(cnsType == "extra"){
collection[i].isUnselect = true;
} else{
tempArr.push(collection[i]);
collection[i].isUnselect = true;
if(this.isSimplify) collection[i].geometry = collection[i].geometry.simplify(cnsPanel.tolerance);
}
cnsPanel.cnsLayer.addFeatures(collection[i]);
}
cnsPanel.pinShow(cnsPanel.sourcePoint.vector);
cnsPanel.pinShow(cnsPanel.destinationPoint.vector);
var ex = cnsPanel.cnsLayer.getDataExtent();
if (cnsPanel.isAutoScale && ex != null) {
map.zoomToExtent(ex);
map.zoomOut();
}
map.setCenter(ex.getCenterLonLat());
}
}
}
});
}
//]]>
</script>
<style type="text/css">
/** 상단 패널 */
.czControlCns2{
display: none;
}
/** 상단 패널 div style */
.czControlCns2 div{
float: left;
width: 53px;
height: 39px;
margin: 5px;
}
/** 상단 패널 출발지 활성화시 스타일 */
.czControlCns2 .czControlCnsPointSourceItemActive{
width: 53px;
height: 39px;
background-image: url("images/start.gif");
background-position: 50% 50%;
}
/** 상단 패널 출발지 비활성화시 스타일 */
.czControlCns2 .czControlCnsPointSourceItemInactive{
width: 53px;
height: 39px;
background-image: url("images/start.gif");
background-position: 50% 50%;
}
/** 상단 패널 도착지 활성화시 스타일 */
.czControlCns2 .czControlCnsPointDestinationItemActive{
width: 53px;
height: 39px;
background-image: url("images/end.gif");
background-position: 50% 50%;
}
/** 상단 패널 도착지 비활성화시 스타일 */
.czControlCns2 .czControlCnsPointDestinationItemInactive{
width: 53px;
height: 39px;
background-image: url("images/end.gif");
background-position: 50% 50%;
}
</style>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
map.cns = new TRITOPS.Control.Cns({
position: new OpenLayers.Pixel(50, 0), // 출발, 도착 패널 위치
displayClass: "czControlCns2",
isDragFeature: false
});
map.addControl(map.cns);
styleAccept();
});
// 길찾기 스타일 변경
function styleAccept(){
map.cns.deactivate();
var sourceStyle = {
externalGraphic: "images/start.gif",
graphicWidth: 53,
graphicHeight: 39,
graphicYOffset: -39
};
map.cns.sourceStyle = sourceStyle;
var destinationStyle = {
externalGraphic: "images/end.gif",
graphicWidth: 53,
graphicHeight: 39,
graphicYOffset: -39
};
map.cns.destinationStyle = destinationStyle;
var routeStyle = {
externalGraphic: "images/pass.gif",
graphicWidth: 53,
graphicHeight: 39,
graphicYOffset: -39
};
map.cns.routeStyle = routeStyle;
var symbolStyle = {
"Point": {
pointRadius: 5,
graphicName: "circle", // square|star|x|cross|triangle|circle
fillColor: "#00FF00",
fillOpacity: 0.5,
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#000",
labelSelect: true,
fontWeight: "bold"
},
"Line": {
strokeWidth: 5,
strokeOpacity: 0.5,
strokeColor: "#0000FF",
strokeLinecap: "square", // butt|round|square
strokeDashstyle: "dash" // dot|dash|dashdot|ongdash|longdashdot|solid
}
};
map.cns.cnsSymbolizers = symbolStyle;
var selectSymbolStyle = {
pointRadius: 5,
graphicName: "circle", // square|star|x|cross|triangle|circle
fillColor: "#00FF00",
fillOpacity: 0.5,
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#00FF00",
labelSelect: true,
fontWeight: "bold"
};
map.cns.cnsSelectSymbolizers = selectSymbolStyle;
map.cns.activate();
var startPoint = new OpenLayers.LonLat(126.978245, 37.566546);
startPoint.transform(projWGS84, projUTMK);
map.cns.setSourcePoint(startPoint.lon, startPoint.lat);
var endPoint = new OpenLayers.LonLat(127.128106, 37.419790);
endPoint.transform(projWGS84, projUTMK);
map.cns.setDestinationPoint(endPoint.lon, endPoint.lat);
var routePoint = new OpenLayers.LonLat(126.792679, 37.581579);
routePoint.transform(projWGS84, projUTMK);
map.cns.addRoutePoint(routePoint.lon, routePoint.lat);
map.cns.search();
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 거리계산 설정
map.cns = new TRITOPS.Control.Cns();
map.addControl(map.cns);
});
// 거리계산
function getDistance(){
var start = new OpenLayers.LonLat(14135108.268190, 4518344.320307);
var end = new OpenLayers.LonLat(14139108.268190, 4515344.320307);
/**
* 모드 설정
* 직선 - TRITOPS.Control.Cns.STRAIGHT_TYPE
* 최적 - TRITOPS.Control.Cns.BEST_TYPE
* 최단 - TRITOPS.Control.Cns.SHORTEST_TYPE
* 고속 - TRITOPS.Control.Cns.HIGHWAY_TYPE
* 무료 - TRITOPS.Control.Cns.FREE_TYPE
*/
map.cns.cnsType = TRITOPS.Control.Cns.STRAIGHT_TYPE
map.cns.distance(start, end, resultsDistance);
}
// 거리계산 callback function
function resultsDistance(data){
if($.type(data) != "undefined"){
var prop = data.properties;
if(prop){
if(prop.status == "error"){
alert(prop.statusDetail);
} else{
$("div#result").html("거리 : "+prop.distance+"m");
}
}
}
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
var size = new OpenLayers.Size(48, 48);
var selectedIcon = new OpenLayers.Icon("http://www.ttmap.co.kr/api/images/select-arrow2.gif", size);
var marker1 = map.addMarkerPopup(lonLat.lon, lonLat.lat, {
icon: selectedIcon,
popupContentHTML: "아이콘 변경",
printMessage: "아이콘 변경", // 이미지 저장시 출력될 텍스트
closeBox: true,
panMapIfOutOfView: false
});
// marker popup object
var popMarker1 = marker1.feature.popup;
// offset 주기
popMarker1.anchor = {
size: new OpenLayers.Size(0, 0),
offset: new OpenLayers.Pixel((size.w/2), 0)
};
// 위치 고정 - br(bottom right), tr(top right), tl(top left), bl(bottom left)
popMarker1.calculateRelativePosition = function(px){
return "br";
}
marker1.events.triggerEvent("mousedown", null);
var lonLat2 = new OpenLayers.LonLat(126.964598, 37.559810);
lonLat2.transform(projWGS84, projUTMK);
var marker2 = map.addMarkerPopup(lonLat2.lon, lonLat2.lat, {
popupContentHTML: "<div style=\"width:50px;padding:4px;border:solid 1px #c4370e;\">팝업응용</div>",
printMessage: "팝업응용", // 이미지 저장시 출력될 텍스트
closeBox: false
});
marker2.events.triggerEvent("mousedown", null);
});
// 지도 이미지 저장
function saveMap(){
map.save();
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 줌 박스
zoomBox = new TRITOPS.Control.TTMapZoomBox();
map.addControl(zoomBox);
// 거리재기
path = map.createMeasureControl(OpenLayers.Handler.Path, "거리재기");
map.addControl(path);
// 면적재기
polygon = map.createMeasureControl(OpenLayers.Handler.Polygon, "면적재기");
map.addControl(polygon);
// 지우기
eraser = new TRITOPS.Control.TTMapMeasureErase({
title: "지우기",
measures: [path, polygon]
});
map.addControl(eraser);
});
// 줌 박스
function setZoomBox(){
zoomBox.activate();
}
// 거리재기
function setPath(){
path.activate();
}
// 면적재기
function setPolygon(){
polygon.activate();
}
// 지우기
function setErase(){
eraser.trigger();
}
// 확대
function setZoomIn(){
map.zoomIn();
}
// 축소
function setZoomOut(){
map.zoomOut();
}
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
// 포인트
var point = new OpenLayers.Geometry.Point(953896.83022861, 1951985.8642772);
var pointStyle = {
pointRadius: 15,
graphicName: "star", // square|star|x|cross|triangle|circle
fillColor: "#00ff00",
fillOpacity: 0.5,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#ff0000"
};
var pointV = new OpenLayers.Feature.Vector(point, null, pointStyle);
// 선
var line = new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(952392.83022861, 1953017.8642772),
new OpenLayers.Geometry.Point(952432.83022861, 1950521.8642772),
new OpenLayers.Geometry.Point(954416.83022861, 1950521.8642772)
]);
var lineStyle = {
strokeWidth: 10,
strokeOpacity: 0.5,
strokeColor: "#0000FF",
strokeLinecap: "square", // butt|round|square
strokeDashstyle: "solid" // dot|dash|dashdot|ongdash|longdashdot|solid
};
var lineV = new OpenLayers.Feature.Vector(line,null,lineStyle);
// 폴리곤
var poly = new OpenLayers.Geometry.Polygon([
new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(954472.83022861, 1953185.8642772),
new OpenLayers.Geometry.Point(954528.83022861, 1952113.8642772),
new OpenLayers.Geometry.Point(955776.83022861, 1951673.8642772),
new OpenLayers.Geometry.Point(956496.83022861, 1952889.8642772)
])
]);
var polygonStyle = {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#666666",
fillColor: "#FF0000",
fillOpacity: 0.5
};
var polygonV = new OpenLayers.Feature.Vector(poly,null,polygonStyle);
// 점, 선, 폴리곤 벡터레이어 추가
var layer = map.layerMap.VECTOR;
layer.addFeatures([pointV,lineV,polygonV]);
// 지도 범위 재설정
var ex = map.layerMap.VECTOR.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
}
});
//]]>
</script>
<script type="text/javascript" src="http://gismap.ttmap.co.kr/TTMap/map.aspx?ver=1.0&key=발급받은_API_KEY" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map = null; // map object
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS84 좌표체계
var projUTMK = new OpenLayers.Projection("EPSG:5179"); // UTM-K 좌표체계
// jQuery onload
$(function(){
map = new TRITOPS.TTMap("map", {
zoom: 9
});
var lonLat = new OpenLayers.LonLat(126.978245, 37.566546);
lonLat.transform(projWGS84, projUTMK);
// 중심점
var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
var cLonLat = lonLat.clone();
cLonLat.transform(projUTMK, projWGS84);
// 반경 1000m(1km)
var compLonlat = OpenLayers.Util.destinationVincenty(cLonLat, 0, 1000);
compLonlat.transform(projWGS84, projUTMK);
var radius = compLonlat.lat - lonLat.lat;
// 중심점, 반경, 점수, 방향
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(point, radius, 100, 0);
var polygonStyle = {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#666666",
fillColor: "#FF0000",
fillOpacity: 0.5
};
var circleFeature = new OpenLayers.Feature.Vector(circle, null, polygonStyle);
var layer = map.layerMap.VECTOR;
layer.addFeatures([circleFeature]);
// 지도 범위 재설정
var ex = map.layerMap.VECTOR.getDataExtent();
if(ex != null){
map.zoomToExtent(ex);
}
});
//]]>
</script>