Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

Tmap web2 위치관제 예제 에러

#1

<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

Insert title here /* 거리표시 팝업*/ .mPop{ border: 1px; background-color: #FFF; font-size: 12px; border-color: #FF0000; border-style: solid; text-align: center; } /*공통사용 클래스*/ .mPopStyle { border: 1px; background-color: #FFF; font-size: 12px; border-color: #FF0000; border-style: solid; text-align:left; } var map; var beforeMarkerList = new Array(); var checkLevel=1;
/* function initTmap(){
	var map = new Tmapv2.Map("map_div",  
	{
		center: new Tmapv2.LatLng(37.566481622437934,126.98502302169841), // 지도 초기 좌표
		width: "890px", 
		height: "400px",
		zoom: 15
	});
}  */

/*-------------------------------- 관제 ------------------------------------------  */

$(document).ready(function () {
	 var checkLevel=1;
	
	map = new Tmapv2.Map("map_div", {
		center: new Tmapv2.LatLng(37.57004566771894,126.97682516925155),
		width: "100%",
		height: "400px"
	});
	map.setZoom(15);
	
	// 2. 위치 조회
		if(window.XMLHttpRequest){
			xhttp=new XMLHttpRequest(); 
		}else{
			xhttp=new ActiveXObject("Microsoft.XMLDOM");
		}
	      
		xhttp.open("GET","/gunzip_final/kml/sample.kml",false);
		xhttp.send();
		var prtcl =  xhttp.responseXML;
		var marker;
		var beforeMarker;
		var popup,popup2;
		var beforePopup,beforePopup2;
		var prtclString = new XMLSerializer().serializeToString(prtcl);//xml to String   
		xmlDoc = $.parseXML( prtclString ),
		$xml = $( xmlDoc ),
		$intRate = $xml.find("Placemark");
		function myFunction(cnt, checkLevel){
		    $intRate.each(function(index, element) {
		       var name = element.getElementsByTagName("name")[0].childNodes[0].nodeValue;
		       var number = element.getElementsByTagName("number")[0].childNodes[0].nodeValue;
		       var affiliation = element.getElementsByTagName("affiliation")[0].childNodes[0].nodeValue;
		       var distance = element.getElementsByTagName("distance")[cnt].childNodes[0].nodeValue;
		       var speed = element.getElementsByTagName("speed")[cnt].childNodes[0].nodeValue;
		       var content = 
		                '<div class="wrap">' + 
		                   '    <div class="info">' + 
		                   '        <div class="title">' + 
		                   '            '+name + 
		                   '        </div>' + 
		                   '        <div class="body">' + 
		                   '            <div class="desc">' + 
		                   '                <div><span>차량번호</span> '+number+'</div>' +  
		                   '                <div><span>소속지사</span> '+affiliation+'</div>' + 
		                   '                <div><span>운행거리</span> '+distance+'km</div>' + 
		                   '                <div><span>현재속도</span> '+speed+'km/h</div>' + 
		                   '            </div>' + 
		                   '        </div>' + 
		                   '    </div>' +     
		                   '</div>';
		       
		       //현재위치 바로 이전 위치를 그리기 위한 부분
		       if(cnt > 0 && cnt >= 1 && cnt < 42 && checkLevel != 4){
		          
		          var beforePoint = element.getElementsByTagName("coordinates")[cnt-1].childNodes[0].nodeValue.split(',');
		          var beforeIcon = '/dist/before_car.png';
		          beforeMarker = new Tmapv2.Marker({
		            position: new Tmapv2.LatLng(beforePoint[1]*=1,beforePoint[0]*= 1),
		            icon: beforeIcon,
		            map: map
		         });
		          beforeMarkerList.push(beforeMarker);
		          
		       }
		       
		      var point = element.getElementsByTagName("coordinates")[cnt].childNodes[0].nodeValue.split(',');
		      var icons = '/dist/pin_car.png';
		      marker = new Tmapv2.Marker({
		            position: new Tmapv2.LatLng(point[1]*=1,point[0]*= 1),
		            icon: icons,
		            map: map
		         });
		          markerList.push(marker);
		    });
		}
	
	//myFunction(0); - checkLevel 변수가 없다고 에러나서 주석처리함

	   
	
	// 3. 위치 관제 시작
	var cnt = 1;
	myVar = setInterval(function(){
		RESET_MARKER();
		var count = $xml.find("Placemark")[0].getElementsByTagName("coordinates").length;
		console.log(count);
		if(cnt == count){
			cnt = 0;
			RESET_MARKER(); //기존 마크지우기
			RESET_MARKER2(); //이전 마크 지우기
		}		
		myFunction(cnt); 
		cnt++;
	}, 1000);
	function RESET_MARKER(){
	   for (var i = 0; i < markerList.length; i++) {
	      if(undefined != markerList[i]){
	         markerList[i].setMap(null);
	         
	         if(i == markerList.length-1){
	            markerList = [];
	         }
	      }
	    }
	}
	function RESET_MARKER2(){
	   for (var i = 0; i < beforeMarkerList.length; i++) {
	      if(undefined != beforeMarkerList[i]){
	         beforeMarkerList[i].setMap(null);
	         
	         if(i == beforeMarkerList.length-1){
	            beforeMarkerList = [];
	         }
	      }
	    }
	}
	   
	
	   // 4. 위치 관제 종료
	   clearTimeout(myVar);
	   markerList=[];
	   RESET_MARKER2();
	   var lastIndex = $intRate.find("coordinates").length-1;
	   myFunction(lastIndex,checkLevel);
	   
	   var result ='총 거리 : 4.412km 총 소요시간 : 22분 '; 
	   var resultDiv = document.getElementById("result");
	   resultDiv.innerHTML = result;
	   
});
</script>

jsp파일입니다. 크롬에서 이런 에러가 나는데 원인을 못 찾겠습니다…

  1. kml파일은 Tmap 사이트에서 받은건데 이것이 잘못되어 있나요?
<?xml version="1.0" encoding="UTF-8"?>
<name>Tmap Position Control Sample</name>

<Placemark>

    <name>홍길동[1234]</name>

    <number>12가 9876</number>

    <affiliation>수도권 동부</affiliation>

    <Point>

        <coordinates>126.9685264145542, 37.56806851568106</coordinates>

        <distance>0</distance>

        <speed>60</speed>

        

        <coordinates>126.96901457658782, 37.56801323970849</coordinates>

        <distance>0.8</distance>

        <speed>65</speed>

        

        <coordinates>126.96917282692544, 37.56817481551288</coordinates>

        <distance>1.5</distance>

        <speed>70</speed>

        

        <coordinates>126.96951883188586, 37.56842355652641</coordinates>

        <distance>2</distance>

        <speed>68</speed>

        <coordinates>126.96992116323581, 37.5686871785736</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97044687620476, 37.569059224230735</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97108524195278, 37.56949292082231</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97157876841088, 37.56980756186718</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97226004950076, 37.57000740075926</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97278039805421, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97333829753406, 37.57012007564219</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9739498411867, 37.57012007564219</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9744111811429, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97476791493429, 37.57012857939959</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9753794585959, 37.57015409066744</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97584884517532, 37.57013708315673</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9764684354512, 37.57015196472907</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97694855087057, 37.57015834254469</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97754936568326, 37.57017960192654</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9780576442929, 37.57017109817494</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97858067504517, 37.57015621660644</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97894813768548, 37.57015196472907</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97936119787535, 37.570143460974315</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.97983863107801, 37.570132831279</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9805762385574, 37.57012220158145</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98110731594187, 37.57011582376275</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98170813076352, 37.570109445943515</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98240550509985, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98296072236295, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98357226602458, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98404701701948, 37.57012432752066</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98457809440393, 37.57013070533862</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98493214598759, 37.57012645345979</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98544176570108, 37.57011582376204</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98590310565729, 37.57011794970214</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9862893437518, 37.57011582376204</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98680164567308, 37.5701136978226</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98731662980208, 37.570111571882364</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98766799918697, 37.57032416556282</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9877511476629, 37.57065155864342</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.9878745292819, 37.57095343930028</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

        <coordinates>126.98833318702138, 37.57118091194374</coordinates>

        <distance>3</distance>

        <speed>65</speed>

        

    </Point>

</Placemark>
  1. Deprecated 에러가 발생해서 구글에 검색해서 시키는대로 했는데 잘 안됩니다…

  2. number의 child node를 못 읽는 것 같은데 kml파일을 못 읽는건지 모르겠습니다

0 Likes

#2

html파일을 그대로 복사했더니 태그 몇개가 안보이네요…

0 Likes

#4

안녕하세요.
Tmap API 운영담당자입니다.

현재 올려주신 소스코드를 참고하여 테스트를 진행 하였습니다.
태그 부분이 많이 빠져있어 스크립트 내용만으로 진행 하였습니다.
문의주신것과 같이 애러가 발생하지 않았습니다.
해당 내용과 관련하여 아래에는 테스트 진행한 코드와
사용한 xml파일링크를 남겨드리겠습니다.


Ex)

<!DOCTYPE html>
<html lang=“kr”>
<head>
<meta charset=“UTF-8”>
<title>Title</title>
<script
src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src=“https://apis.openapi.sk.com/tmap/jsv2?version=1&appkey=발급받은 AppKey”></script>
<!-- <script src="./resources/js/tmapv2.min.js"></script> -->
<script>

//var map;
var markerList = [];
var beforeMarkerList = [];

function initMap(){

map = new Tmapv2.Map(“map_div”, {
center: new Tmapv2.LatLng(37.57004566771894,126.97682516925155),
width: “100%”,
height: “400px”
});
map.setZoom(15);

// 2. 위치 조회
if(window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}else{
xhttp=new ActiveXObject(“Microsoft.XMLDOM”);
}

xhttp.open(“GET”,“sample.kml”,false);
xhttp.send();
var prtcl = xhttp.responseXML;
var marker;
var beforeMarker;
var popup,popup2;
var beforePopup,beforePopup2;
var prtclString = new XMLSerializer().serializeToString(prtcl);//xml to String
xmlDoc = $.parseXML( prtclString ),
$xml = $( xmlDoc ),
$intRate = $xml.find(“Placemark”);
function myFunction(cnt, checkLevel){
$intRate.each(function(index, element) {
var name = element.getElementsByTagName(“name”)[0].childNodes[0].nodeValue;
var number = element.getElementsByTagName(“number”)[0].childNodes[0].nodeValue;
var affiliation = element.getElementsByTagName(“affiliation”)[0].childNodes[0].nodeValue;
var distance = element.getElementsByTagName(“distance”)[cnt].childNodes[0].nodeValue;
var speed = element.getElementsByTagName(“speed”)[cnt].childNodes[0].nodeValue;
var content =
‘<div class=“wrap”>’ +
’ <div class=“info”>’ +
’ <div class=“title”>’ +
’ ‘+name +
’ </div>’ +
’ <div class=“body”>’ +
’ <div class=“desc”>’ +
’ <div><span>차량번호</span> ‘+number+’</div>’ +
’ <div><span>소속지사</span> ‘+affiliation+’</div>’ +
’ <div><span>운행거리</span> ‘+distance+‘km</div>’ +
’ <div><span>현재속도</span> ‘+speed+‘km/h</div>’ +
’ </div>’ +
’ </div>’ +
’ </div>’ +
‘</div>’;

//현재위치 바로 이전 위치를 그리기 위한 부분
if(cnt > 0 && cnt >= 1 && cnt < 42 && checkLevel != 4){

var beforePoint = element.getElementsByTagName(“coordinates”)[cnt-1].childNodes[0].nodeValue.split(’,’);
var beforeIcon = ‘/resources/images/common/before_car.png’;
beforeMarker = new Tmapv2.Marker({
position: new Tmapv2.LatLng(beforePoint[1]=1,beforePoint[0]= 1),
icon: beforeIcon,
map: map
});
beforeMarkerList.push(beforeMarker);

       }

var point = element.getElementsByTagName(“coordinates”)[cnt].childNodes[0].nodeValue.split(’,’);
var icons = ‘/resources/images/common/pin_car.png’;
marker = new Tmapv2.Marker({
position: new Tmapv2.LatLng(point[1]=1,point[0]= 1),
icon: icons,
map: map
});
markerList.push(marker);
});
}

//myFunction(0); - checkLevel 변수가 없다고 에러나서 주석처리함

// 3. 위치 관제 시작
var cnt = 1;
myVar = setInterval(function(){
RESET_MARKER();
var count = $xml.find(“Placemark”)[0].getElementsByTagName(“coordinates”).length;
console.log(count);
if(cnt == count){
cnt = 0;
RESET_MARKER(); //기존 마크지우기
RESET_MARKER2(); //이전 마크 지우기
}
myFunction(cnt);
cnt++;
}, 1000);
function RESET_MARKER(){
for (var i = 0; i < markerList.length; i++) {
if(undefined != markerList[i]){
markerList[i].setMap(null);

if(i == markerList.length-1){
markerList = [];
}
}
}
}
function RESET_MARKER2(){
for (var i = 0; i < beforeMarkerList.length; i++) {
if(undefined != beforeMarkerList[i]){
beforeMarkerList[i].setMap(null);

if(i == beforeMarkerList.length-1){
beforeMarkerList = [];
}
}
}
}

// 4. 위치 관제 종료
clearTimeout(myVar);
markerList=[];
RESET_MARKER2();
var lastIndex = $intRate.find(“coordinates”).length-1;
myFunction(lastIndex,0);

var result ='총 거리 : 4.412km 총 소요시간 : 22분 ';
var resultDiv = document.getElementById(“result”);
resultDiv.innerHTML = result;

}

</script>
</head>
<body onload=“initMap();”>

<div id=“map_div”
style=“width: 100%; height: 100%; border: 1px; border-style: solid; border-color: blue”></div>
<p id=“result” />
</body>
</html>

[Sample.xml파일 링크]
http://tmapapi.sktelecom.com/web/usecase/sample.kml


감사합니다.

0 Likes