위도, 경도 json 파일을 이용해서 다음지도에 polygon을 그리고 싶어요

skypoly3777 · 10월 24, 2018, 8:37오전

안녕하세요

여기 이 글을 참고해서 하고있는데요,

[
{
“lat”: “33.45048921971038”,
“lng”: “126.56945764814947”
},
{
“lat”: “33.45161147503022”,
“lng”: “126.57068899102602”
},
{
“lat”: “33.45030726256981”,
“lng”: “126.57158811450451”
}
]

이런 형태의 json 파일까지 만들었습니다.

function parsing() {

// getJSON 방법
  $.getJSON('resources/jsonData/maptest.json', function(data){
	 
	 var html = [];
	 
	 $.each(data, function(i, item){
		 
		 var jsondata = JSON.stringify(item);
		 
		 console.log(jsondata)
           /* console.log(jsondata) 출력값
	{"lat":"33.450690851406016","lng":"126.57040313031214"}
             {"lat":"33.451613893603586","lng":"126.57138808997703"}
             {"lat":"33.44953657284708","lng":"126.57294707102747"}
             {"lat":"33.44940037146644","lng":"126.57266810128161"}
                                                                                                 */
		 html.push('<div>');
		 html.push('<h3>'+item.lat+'</h3>');
         html.push('<h3>'+item.lng+'</h3>');
         html.push('<hr>')
         html.push('</div>');
	 })
	 
	 $('#target').html(html.join(' '));
	 
 })

}

이렇게 해서, target 영역에 데이터가 이렇게 출력됩니다.

33.450690851406016
126.57040313031214
33.451613893603586
126.57138808997703
33.44953657284708
126.57294707102747
33.44940037146644
126.57266810128161

– 이제 제가 하고싶은건
json파일을 이용해서 polygon을 맵에 그리고 싶은데요,

– 위에 링크 참고
// DB에 저장된 데이타를 문자열(coordsStr)로 받은 경우
// 역변환(deserialize, 문자열=>객체화)해서 하여 그려준다.
var coordsArr = JSON.parse( coordsStr );
var path = coordsArr.map(function ( coords ) {
return new daum.maps.LatLng( coords.lat, coords.lng );
});
var polygon = new daum.maps.Polygon({
map: map,
path: path
});

이걸 이렇게 사용하니까 coordsArr.map(function 정의되지 않았다고
에러가 납니다 ㅠㅠ 어떻게 해야하나요?

var coordsArr = JSON.parse( coordsStr );
var path = coordsArr.map(function ( coords ) {

이 부분을 정확히 모르겠어요~

doji.doo · 10월 24, 2018, 9:10오전

JSON.parse( coordsStr );

이것의 리턴값이 Array로 나올 것을 가정하고 Array.prototype.map 함수를 사용한 코드입니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

만약 저것이 배열이 아닌 일반적인 key-value 형태의 오브젝트일때 문제가 될 수 있습니다.
우선 coordsArr 이 어떤 형태인지 console.log로 찍어보시길 바랍니다.

skypoly3777 · 10월 25, 2018, 8:30오전

밑에 하단은 해당 소스입니다.

말씀해주신 대로 Array형태로 리턴값이 나오도록 했습니다.

ㅜㅜ 어제와 똑같은 에러가 발생합니다… 왜그런거죠

function parsing() {

var mapdata;

// getJSON 방법
  $.getJSON('resources/jsonData/maptest.json', function(data){
	 
	 var html = [];
	 
	 var aJsonArray = new Array();
	 
	 $.each(data, function(i, item){
		 var jsondata = JSON.stringify(item);
		 
		 var obj = eval("("+jsondata+")"); // object 형태로 변경
          
          /* console.log(obj.lat); // 위도
          console.log(obj.lng); // 경도 */
          
          var aJson = new Object();
           
          aJson.lat = obj.lat;
          aJson.lng = obj.lng;
           
          aJsonArray.push(aJson);
           
          var obj_s = JSON.stringify(aJsonArray, null, "\t"); // jsonArray 형태로 변경
          
          mapdata = obj_s;
          
          console.log(mapdata); // 배열형태 확인
          
          var coordsArr = mapdata;
          var path = coordsArr.map(function ( coords ) {
              return new daum.maps.LatLng( coords.lat, coords.lng );
          }); 
           var polygon = new daum.maps.Polygon({
               map: map,
               path: path
          }); 
           
          // 지도에 다각형을 표시합니다
          polygon.setMap(map);
          
	 })
	 
	 
	 
          
	/*  $('#target').html(html.join(' ')); */
	 
 
	 /* var polygonPath = [
		    new daum.maps.LatLng(33.450690851406016, 126.57040313031214), 
            new daum.maps.LatLng(33.451613893603586, 126.57138808997703),
            new daum.maps.LatLng(33.44953657284708, 126.57294707102747),
            new daum.maps.LatLng(33.44940037146644, 126.57266810128161)
		];

		// 지도에 표시할 다각형을 생성합니다
		var polygon = new daum.maps.Polygon({
		    path:polygonPath, // 그려질 다각형의 좌표 배열입니다
		    strokeWeight: 3, // 선의 두께입니다
		    strokeColor: '#39DE2A', // 선의 색깔입니다
		    strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
		    strokeStyle: 'longdash', // 선의 스타일입니다
		    fillColor: '#A2FF99', // 채우기 색깔입니다
		    fillOpacity: 0.7 // 채우기 불투명도 입니다
		});

		// 지도에 다각형을 표시합니다
		polygon.setMap(map); */
		 
		 
 })

}

doji.doo · 10월 25, 2018, 8:36오전

스샷 기준으로 보면coordsArr 변수값이 자바스크립트 배열이 아니라
문자열 같은데요?
제대로 파싱이 성공했으면

콘솔에 이런 형태로 나와야 합니다.

JSON.parse가 제대로 안된 것 같은데 확인해 보세요.

skypoly3777 · 10월 25, 2018, 8:44오전

넵 확인해보겠습니다.

http://skypoly3777.blog.me/221384903723

이 url은 전체 소스 첨부파일 올려놨습니다.

참고 부탁드립니다.

doji.doo · 10월 25, 2018, 8:54오전

범인은… JSON.stringify()

이걸 하시면 안됩니다. ㅠㅠ
저건 함수이름 그대로 객체를 문자열화 시키는 '직렬화’이기 때문입니다.

위에 말씀드렸듯, map() 함수는 Array.prototype에 속해있는 함수입니다.
(헤깔리지 말으셔야 할 것이 있는데, map함수는 지도의 의미가 아닙니다! 지도 API와 전혀 상관없는 javascript native 함수에요.)
때문에 JSON.parse한 자바스크립트 배열 객체로부터 접근해야 합니다.
[].map() 처럼요.

aJsonArray.map() 으로 시도해보세요.

skypoly3777 · 10월 25, 2018, 9:02오전

이렇게 수정해서 적용했습니다!!
감사해요 ㅠㅠㅠ

stringify 는 그대로 썼는데, 글을 늦게 확인했어요

밑에처럼 수정했습니다.

function parsing() {

var mapdata;

// getJSON 방법
  $.getJSON('resources/jsonData/maptest.json', function(data){
	 
	 var html = [];
	 
	 var aJsonArray = new Array();
	 
	 $.each(data, function(i, item){

		 var jsondata = JSON.stringify(item); // 문자열변환
		 //console.log(jsondata) // {"lat":"33.450690851406016","lng":"126.57040313031214"}
		 
		 var obj = eval("("+jsondata+")"); // object 형태로 변경
		 //console.log(obj) // {lat: "33.450690851406016", lng: "126.57040313031214"}
		 
		 // jsonArray 형태로 변경
          /* console.log(obj.lat); // 위도
          console.log(obj.lng); // 경도 */
          
           var aJson = new Object();
           
          aJson.lat = obj.lat;
          aJson.lng = obj.lng;
           
          aJsonArray.push(aJson); // 배열에 Object push
          
          mapdata = aJsonArray; 
          
	 })

	 console.log(mapdata); // 배열형태 확인  
          
     var coordsArr = mapdata;
     var path = coordsArr.map(function ( coords ) {
         return new daum.maps.LatLng( coords.lat, coords.lng );
     }); 
      var polygon = new daum.maps.Polygon({
          map: map,
          path: path
     }); 
      
     // 지도에 다각형을 표시합니다
     polygon.setMap(map); 
         
 })