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

Tech.Forum

경로탐색 적용시 크롬에선 되는데 익스플로러에선 에러가 납니다.

#1

경로탐색 적용하기 http://tmapapi.sktelecom.com/main.html#webservice/sample/WebSampleRoutes
에 있는 코드로 실행했을 때
익스플로러에서는 마커는 표시가 되는데
JQMIGRATE: jQuery is not compatible with Quirks Mode
연결된 페이지가 console.trace을(를) 지원하지 않는 문서 모드 5을(를) 대상으로 합니다.
code:0
message:undefined
error:[object Error]
이 에러가 뜨면서 경로탐색이 안되고,

크롬에서는 삼각형 느낌표로 A parser-blocking, cross site 라고 뜨긴하는데 잘 실행됩니다.
익스플로러에서 실행하려면 어떻게 해야하나요?

0 Likes

#2

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

문의주신 내용을 검토해본 결과 보내주신 내용만으로는 정확한 원인 파악이 어렵습니다.

다만, 보내주신 'JQMIGRATE: jQuery is not compatible with Quirks Mode'의 내용으로 구글링해본 결과 아래와 같은 해결방법을 확인할 수 있었습니다. ---------------------------------------- 정확한 DOCTYPE(문서타입)을 선언하고 표준모드로 작동되게 하라. HTML5의 간단한 을 추천한다. ----------------------------------------

자세한 내용은 아래의 링크를 참조하시면 도움이 되실겁니다.


https://webdir.tistory.com/469

추가적으로 위와같은 해결 방법인 DOCTYPE (문서타입)을 선언한 이후에도 같은 문제가 발생하신다면 참조하신 가이드 샘플예제 링크와 에러가 발생한 소스코드를 포함하여 다시 문의주시면 확인 후 답변드리도록 하겠습니다.

감사합니다.

0 Likes

#3

맨위에 <!DOCTYPE> 추가하였는데도 오류가 납니다.
밑에가 오류가 나는 부분입니다.
$.ajax({
type:“POST”,
headers : headers,
url:“https://api2.sktelecom.com/tmap/routes?version=1&format=xml”,//자동차 경로안내 api 요청 url입니다.
async: false,
//dataType : “text”,//추가
data:{
//출발지 위경도 좌표입니다.
startX : “126.9850380932383”,
startY : “37.566567545861645”,
//목적지 위경도 좌표입니다.
endX : “127.10331814639885”,
endY : “37.403049076341794”,
//출발지, 경유지, 목적지 좌표계 유형을 지정합니다.
reqCoordType : “WGS84GEO”,
resCoordType : “EPSG3857”,
//각도입니다.
angle : “172”,
//경로 탐색 옵션 입니다.
searchOption : 0,
//교통정보 포함 옵션입니다.
trafficInfo : “Y”

            	},
            	//데이터 로드가 성공적으로 완료되었을 때 발생하는 함수입니다.
            	success:function(response){
            		var prtcl = response;
            		
            		// 결과 출력
            		var innerHtml ="";
            		var prtclString = new XMLSerializer().serializeToString(prtcl),//xml to String	
                    xmlDoc = $.parseXML(prtclString),
            		$xml = $( xmlDoc ),
            		$intRate = $xml.find("Document");
                    
            		var tDistance = " 총 거리 : "+($intRate[0].getElementsByTagName("tmap:totalDistance")[0].childNodes[0].nodeValue/1000).toFixed(1)+"km,";
            		var tTime = " 총 시간 : "+($intRate[0].getElementsByTagName("tmap:totalTime")[0].childNodes[0].nodeValue/60).toFixed(0)+"분";	
            		var tFare = " 총 요금 : "+$intRate[0].getElementsByTagName("tmap:totalFare")[0].childNodes[0].nodeValue+"원,";	
            		var taxiFare = " 예상 택시 요금 : "+$intRate[0].getElementsByTagName("tmap:taxiFare")[0].childNodes[0].nodeValue+"원";	
                                       

                    $("#result").text(tDistance + tTime + tFare + taxiFare);
                    //$("#result").text(tTime);
            		
            		routeLayer.removeAllFeatures();//레이어의 모든 도형을 지웁니다.
            				
            		var traffic = $intRate[0].getElementsByTagName("traffic")[0];
            		//교통정보가 포함되어 있으면 교통정보를 포함한 경로를 그려주고
            		//교통정보가 없다면  교통정보를 제외한 경로를 그려줍니다.
            		if(!traffic){
            			var prtclLine = new Tmap.Format.KML({extractStyles:true, extractAttributes:true}).read(prtcl);//데이터(prtcl)를 읽고, 벡터 도형(feature) 목록을 리턴합니다.
            			
            			//표준 데이터 포맷인 KML을 Read/Write 하는 클래스 입니다.
            			//벡터 도형(Feature)이 추가되기 직전에 이벤트가 발생합니다.
            			routeLayer.events.register("beforefeatureadded", routeLayer, onBeforeFeatureAdded);
            	        function onBeforeFeatureAdded(e) {
            		        	var style = {};
            		        	switch (e.feature.attributes.styleUrl) {
            		        	case "#pointStyle":
            			        	style.externalGraphic = "http://topopen.tmap.co.kr/imgs/point.png"; //렌더링 포인트에 사용될 외부 이미지 파일의 url입니다.
            						style.graphicHeight = 16; //외부 이미지 파일의 크기 설정을 위한 픽셀 높이입니다.
            						style.graphicOpacity = 1; //외부 이미지 파일의 투명도 (0-1)입니다.
            						style.graphicWidth = 16; //외부 이미지 파일의 크기 설정을 위한 픽셀 폭입니다.
            		        	break;
            		        	default:
            						style.strokeColor = "#ff0000";//stroke에 적용될 16진수 color
            						style.strokeOpacity = "1";//stroke의 투명도(0~1)
            						style.strokeWidth = "5";//stroke의 넓이(pixel 단위)
            		        	};
            	        	e.feature.style = style;
            	        }
            			
            			routeLayer.addFeatures(prtclLine); //레이어에 도형을 등록합니다.
            		}else{
            			//기존 출발,도착지 마커릉 지웁니다.
            			markerLayer.removeMarker(marker_s); 
            			markerLayer.removeMarker(marker_e);
            			routeLayer.removeAllFeatures();//레이어의 모든 도형을 지웁니다.
            			
            			//-------------------------- 교통정보를 그려주는 부분입니다. -------------------------- 
            			var trafficColors = {
            					extractStyles:true,
            					
            					/* 실제 교통정보가 표출되면 아래와 같은 Color로 Line이 생성됩니다. */
            					trafficDefaultColor:"#000000", //Default
            					trafficType1Color:"#009900", //원할
            					trafficType2Color:"#8E8111", //지체
            					trafficType3Color:"#FF0000"  //정체
            					
            				};    
            			var kmlForm = new Tmap.Format.KML(trafficColors).readTraffic(prtcl);
            			routeLayer = new Tmap.Layer.Vector("vectorLayerID"); //백터 레이어 생성
            			routeLayer.addFeatures(kmlForm); //교통정보를 백터 레이어에 추가   
            			
            			map.addLayer(routeLayer); // 지도에 백터 레이어 추가
            			//-------------------------- 교통정보를 그려주는 부분입니다. -------------------------- 
            		}
            		
            		map.zoomToExtent(routeLayer.getDataExtent());//map의 zoom을 routeLayer의 영역에 맞게 변경합니다.	
            	},
            	//요청 실패시 콘솔창에서 에러 내용을 확인할 수 있습니다.
                error: function (request, status, error) {
                    console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
            	}
            });
0 Likes

#4

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

보내주신 소스를 테스트해본 결과 정상동작하는 것을 확인하였습니다.

다만, 위에 올려주신 에러 메시지를 구글링해본 결과 Internet Explorer 11 버전 이후 호환성 이슈관련 문제가 있는 것을 발견하였습니다.

아래의 사이트를 참조하여 브라우저 설정을 변경한 이후에도 동일한 현상이 발생하신다면 HTML 소스를 포함하여 다시 문의주시면 확인 후 답변드리도록 하겠습니다.


https://m.blog.naver.com/PostView.nhn?blogId=yd1988&logNo=220550724684&proxyReferer=https%3A%2F%2Fwww.google.com%2F

감사합니다.

0 Likes