113 lines
4.0 KiB
HTML
113 lines
4.0 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<title>addMarker</title>
|
|
|
|
<!-- API key를 포함하여 브이월드 API URL을 지정하여 호출 시작 -->
|
|
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?apiKey=@7E59C6EC-6BB0-3ED9-ACCC-4158869D7CFD"></script>
|
|
<!-- <script type="text/javascript" src="/js/oriApi.js"></script> -->
|
|
<!-- API key를 포함하여 브이월드 API URL을 지정하여 호출끝 -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
var apiMap;//2D map
|
|
var SOPPlugin;//3D map
|
|
vworld.showMode = false;//브이월드 배경지도 설정 컨트롤 유무(true:배경지도를 컨트롤 할수 있는 버튼 생성/false:버튼 해제)
|
|
var mControl;//마커이벤트변수
|
|
var tempMarker = null;//임시마커
|
|
|
|
/**
|
|
* - rootDiv, mapType, mapFunc, 3D initCall, 3D failCall
|
|
* - 브이월드 5가지 파라미터를 셋팅하여 지도 호출
|
|
*/
|
|
vworld.init("vMap", "map-first",
|
|
function() {
|
|
apiMap = this.vmap;//브이월드맵 apiMap에 셋팅
|
|
apiMap.setBaseLayer(apiMap.vworldBaseMap);//기본맵 설정
|
|
apiMap.setControlsType({"simpleMap":true}); //간단한 화면
|
|
apiMap.addVWORLDControl("zoomBar");//panzoombar등록
|
|
apiMap.setCenterAndZoom(14243425.793355, 4342305.8698004, 7);//화면중심점과 레벨로 이동 (초기 화면중심점과 레벨)
|
|
},
|
|
function (obj){//3D initCall(성공)
|
|
SOPPlugin = obj;
|
|
},
|
|
function (msg){//3D failCall(실패)
|
|
alert(msg);
|
|
}
|
|
);
|
|
|
|
/**
|
|
* 마커 찍기
|
|
*/
|
|
function addMarkingEvent(){
|
|
var pointOptions = {persist:true};//포인트옵션
|
|
if (mControl == null) {//마커컨트롤이 정의 되어 있지 않으면
|
|
mControl =
|
|
new OpenLayers.Control.Measure(
|
|
OpenLayers.Handler.Point,
|
|
{handlerOptions:pointOptions});//포인트 객체 생성
|
|
mControl.events.on({"measure":mClick});//객체를 클릭이벤트 등록
|
|
apiMap.addControl(mControl);//나의 map에 객체 추가
|
|
}
|
|
apiMap.init();//나의 맵 초기화
|
|
mControl.activate();//마커컨트롤 활성화
|
|
}
|
|
|
|
/**
|
|
* 말풍선이벤트
|
|
*/
|
|
function mClick(event){
|
|
apiMap.init();//나의 맵 초기화
|
|
var temp = event.geometry;//마커 클릭이벤트시 나오는 좌표
|
|
var pos = new OpenLayers.LonLat(temp.x, temp.y);//좌표값 셋팅
|
|
|
|
addMarker(pos.lon, pos.lat,"마커클릭시나오는말풀선.", null);//말풍선
|
|
}
|
|
|
|
/**
|
|
* 말풍선결과
|
|
*/
|
|
function addMarker(lon, lat, message, imgurl){
|
|
var marker = new vworld.Marker(lon, lat,message,"");
|
|
|
|
// 마커 아이콘 이미지 파일명 설정합니다.
|
|
if (typeof imgurl == 'string') {marker.setIconImage(imgurl);}
|
|
|
|
// 마커의 z-Index 설정
|
|
marker.setZindex(3);
|
|
|
|
apiMap.addMarker(marker);
|
|
tempMarker = marker;
|
|
}
|
|
|
|
/**
|
|
* 제주도 이동 및 마커찍기
|
|
*/
|
|
function moveMarker(){
|
|
//해당좌표로 지도 이동 및 말풍선 내용 표기
|
|
addMarker("14105383.450839", "3950184.1545913", "제주도입니다.", null);
|
|
|
|
//해당좌표로 지도 이동 및 레벨 이동
|
|
apiMap.setCenterAndZoom(14105383.450839, 3950184.1545913, 11);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 지도가 들어갈 영역 시작 -->
|
|
<div id="vMap" style="width:100%;height:650px;left:0px;top:0px"></div>
|
|
<!-- 지도가 들어갈 영역 끝 -->
|
|
|
|
<!-- chart control -->
|
|
<div id="desc" style="padding:5px 0 0 5px;">
|
|
<button type="button" onclick="javascript:addMarkingEvent();" name="addpin" >마커찍기</button>
|
|
<button type="button" onclick="javascript:tempMarker.hide();" name="addpin" >마커숨기기</button>
|
|
<button type="button" onclick="javascript:tempMarker.show();" name="addpin" >마커나타내기</button>
|
|
<button type="button" onclick="javascript:moveMarker();" name="addpin" >제주도</button>
|
|
<button type="button" onclick="javascript:apiMap.initAll();" name="addpin" >초기화</button>
|
|
</div>
|
|
<!-- chart control -->
|
|
</body>
|
|
</html> |