<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>OpenAPI Map Test - 마커, InfoWindow 테스트</title>
<!-- prevent IE6 flickering -->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var tList;
jQuery(document).ready(
function () {
loadTerminatorLocations();
loadMap();
}
);
function loadTerminatorLocations(){
jQuery.ajax({
type: 'GET',
url: 'http://localhost:8080/satellite/pos/all',
dataType: 'json',
success: function(data) {
tList = data.terminatorGeoList;
},
data: {},
async: false
});
}
function loadMap(){
var oCenterPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('testMap', {
point : oCenterPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 5, 12 ],
size : new nhn.api.map.Size(500, 400)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({left:80, bottom:40}); // - 줌 컨트롤 위치 지정
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.
var markerCount = 0;
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('terminator_cyborg.gif', oSize, oOffset);
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
mapInfoTestWindow.attach('changeVisible', function(oCustomEvent) {
if (oCustomEvent.visible) {
oLabel.setVisible(false);
}
});
oMap.attach('mouseenter', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});
oMap.attach('mouseleave', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에서 마우스 나간거면
if (oTarget instanceof nhn.api.map.Marker) {
oLabel.setVisible(false);
}
});
jQuery(tList).each(
function(idx){
var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '터미네이터 : ' + this.tcode});
oMarker1.setPoint(new nhn.api.map.LatLng(tList[idx].latitude, tList[idx].longitude));
jQuery(oMap).click( function(oEvent){
alert('마커 ' + oEvent.target.getTitle() + '를 클릭했습니다');
});
oMap.addOverlay(oMarker1);
}
);
oMap.attach('click', function(oEvent) {
mapInfoTestWindow.setPoint(oEvent.target.getPoint());
mapInfoTestWindow.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 2px 2px 2px !important">' +
''+oEvent.target.getTitle()+' <br /> <span></div>');
mapInfoTestWindow.setVisible(true);
});
}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=4e4cc2effff6e97f9c04f5dbad16f0eb"></script>
<body>
<div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:20px;"></div>
</body>
</html>
댓글 없음:
댓글 쓰기