하은양 믿음군 효실맘 호홍홍집s

Naver Map api v3 TM128좌표 사용기 본문

가벼운 배움/javascript

Naver Map api v3 TM128좌표 사용기

호홍홍집 2017. 1. 18. 18:40

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=클라이언트ID&submodules=geocoder"></script>

<div id="mapContainer3_7" style="HEIGHT: 360px; WIDTH: 550px"></div>
<script type="text/javascript">

/*지도 개체 생성 */
var mapOptions = {
 center: new naver.maps.Point(516728, 359919),
    zoom: 10,
 mapTypes: new naver.maps.MapTypeRegistry({
  'normal': naver.maps.NaverMapTypeOption.getNormalMap({  // NAVER 일반 지도 유형
   projection: naver.maps.TM128Coord     //  지도 유형의 투영입니다. TM128 투영법
  }),
  'terrain': naver.maps.NaverMapTypeOption.getTerrainMap({  // NAVER 지형도 유형
   projection: naver.maps.TM128Coord
  }),
  'satellite': naver.maps.NaverMapTypeOption.getSatelliteMap({ // NAVER 위성 지도 유형
   projection: naver.maps.TM128Coord
  }),
  'hybrid': naver.maps.NaverMapTypeOption.getHybridMap({ // NAVER 위성 겹쳐 보기 지도 유형
   projection: naver.maps.TM128Coord
  })
 }) 
};
var Vmap = new naver.maps.Map('mapContainer3_7', mapOptions);  // 지도 생성..


var xCoordArr = [517431,516033,516596,515423,510173,519896];
var yCoordArr = [360122,360360,359658,362079,360249,354307];
var titleArr  = ["신라 밀레니엄 파크", "경주월드", "엑스포공원", "드림센터", "신라 문화체험장", "카트벨리"];

var Vmarkers = [], VinfoWindows = [];
for(var i = 0; i < xCoordArr.length; i++){
 var iconNum = i + 1;
 var marker = new naver.maps.Marker({
  map: Vmap,
  title : titleArr[i],  
  position: new naver.maps.Point(xCoordArr[i], yCoordArr[i]),
  icon: {
   url: '/images/common/num_0'+iconNum+'.png',
   size: new naver.maps.Size(24, 24),   //  size 속성은 이미지의 크기, origin 속성은 (0, 0), anchor 속성은 이미지의 중앙 하단 포인터를 기본값으로 설정합니다
   origin: new naver.maps.Point(0, 0),
   anchor: new naver.maps.Point(12, 24)
  }
 });

 var infoWindow = new naver.maps.InfoWindow({
        content: '<div style="width:115px;text-align:center;padding:10px;"><strong>'+ titleArr[i] +'</strong></div>'
    });

    Vmarkers.push(marker);
    VinfoWindows.push(infoWindow);
}

// 해당 마커의 인덱스를 seq라는 클로저 변수로 저장하는 이벤트 핸들러를 반환합니다.
function getClickHandler(map,markers,infoWindows,seq) {
    return function(e) {
        var marker = markers[seq],
            infoWindow = infoWindows[seq];

        if (infoWindow.getMap()) {
            infoWindow.close();
        } else {
            infoWindow.open(map, marker);
        }
    }
}

for (var i=0, ii = Vmarkers.length; i < ii; i++) {
    naver.maps.Event.addListener(Vmarkers[i], 'click', getClickHandler(Vmap,Vmarkers,VinfoWindows,i));
}
</script>