Php에서 json으로 출력한 것을 ajax으로 받아서 자바스크립트로 출력하기

지도/로컬 API에 대한 문의게시판입니다.

php에서 json으로 출력한 것을 ajax으로 받아서 자바스크립트로 출력하고 싶습니다.

다음은 php json 출력 코드입니다.

<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);

mysqli_set_charset($con, "utf8");

$res = mysqli_query($con, "select * from Marker_DB");
$result = array();

while ($row = mysqli_fetch_array($res)) {
    array_push($result,
      array('lon'=>$row[2]
    ));
}

header('Content-Type: application/json; charset=utf8');
$json = json_encode(array("result"=>$result), JSON_PRETTY_PRINT+JSON_UNESCAPED_UNICODE);

?>

이것을 불러와서 다음 자바스크립트 코드에 넣고 싶습니다

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
    center: new daum.maps.LatLng(37.23620796972232,127.20643061901345), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨

};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

<?php

$a = include_once('php_json_1.php');
$b = include_once('php_json_2.php');

?>

for (var i = 0; i < 1000; i ++) {
  var positions = [
      {
          latlng: new daum.maps.LatLng(<?= $a; ?>, <?= $b; ?>)
      }
  ];
}

제가 시행착오를 겪은 내용과 테스트 출력을 블로그에 정리했습니다.
즉, 저 부분빼고는 다 됩니다 … ㅠㅠ
https://hufs4programming.tistory.com/7

자바스크립트 코드가 문제인거 같은데 어떻게 해야할지 모르겠습니다.
제발 도와주세요 ㅠㅠㅠㅠ

블로그에 댓글로 달아주신 분이 계시네요 ^^;

그러나 댓글써주신 분 처럼 하여도 빈화면으로 나옵니다…
그래서 ajax을 사용하고 싶습니다.

블로그에 있는 이 전에 시도했던, 하나만 출력되는 코드에서

var positions = [];

선언하고

php 반복문(while) 안에서

positions.push({ latlng:new daum.maps.LatLng(/*blah blah...*/) });

를 하여 positions 배열을 계속 채워나가야 여러개가 출력됩니다.

지금 위 코드는 positions에 latlng 속성 하나만 들어있는 객체를 계속 재할당 하기만 하니까
결국 마지막 하나만 출력되는거죠.

더불어, 1000개 이상의 마커를 한 번에 지도위에 노출시키게 되면
지도가 느려질 수 있으니 유의해서 사용하세요.

조언 주신 방법으로 진행하였는데, 문법에러가 발생합니다…

"syntax error, unexpected ‘:’, expecting ‘,’ or ‘)’ in "

$n = 1;
while($row = mysqli_fetch_array($result)){
  positions.push({ latlng: new daum.maps.LatLng($row['lat'],     $row['lon']) });
  $n++;
}

흐음… while 문은 php고 positions에 넣어주는 부분은 자바스크립트 잖아요.
다 php로 쓰셨는데 그러면 스크립트로써 해석이 안되고 뭔가 에러가 나겠죠. 분리하셔야 합니다.

위의 분리 방식이 힘들다면
php에서 위경도만으로 이루어진 객체를 미리 생성해 두고
그걸 자바스크립트 변수에 할당하는 코드를 작성한 뒤에
그 변수(배열)값을 자바스크립트 반복문으로 돌면서 positions를 구성하셔야 합니다.

감사합니다. 덕분에 살았습니다 :slight_smile:

1개의 좋아요