Google지도 api v3 폴리선이 보이지 않음

Question

Google지도 v3을 사용하고 있습니다. json 파일의 정보로 일부 마커를 만들었습니다. 지도에 일부 노선을 넣으려고하는데이 방법이 효과가 없으며 이유가 없습니다.

var positions = []; 
var map; 

$(function() { 
    map = initializeMap(); 
    loadMarkers(); 
    var flightPath = new google.maps.Polyline({ 
     path: positions, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
}); 

function initializeMap() { 
    var myOptions = { 
     center: new google.maps.LatLng(41.376809, -37.441406), 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 

    return map; 

}; 

function loadMarkers() { 
    var latlng; 
    var marker; 
    var image = 'img/praline.png'; 
    $.getJSON('json/markers.json', function (data) { 
     $(data).each(function (index, value) { 
      latlng = new google.maps.LatLng(value.x, value.y); 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: value.title, 
       icon: image 
      }); 
      positions[value.id - 1] = latlng; 

     }); 

    }); 


} 

그리고 여기 내 JSON 파일 : 사전에

[ 
    { 
     "class":"marker", 
     "id":1, 
     "x":"47.175303", 
     "y":"7.064539", 
     "title":"Camille Bloch", 
     "date":"21/10/2010", 
     "details":"<h1>Camille Bloch</h1><h4>Courtelary, CH</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>" 
    }, 
    { 
     "class":"marker", 
     "id":2, 
     "x":"51.903421", 
     "y":"4.483248", 
     "title":"Haven Rotterdam", 
     "date":"22/10/2010", 
     "details":"<h1>Haven Rotterdam</h1><h4>Rotterdam, NL</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>" 
    } 
] 

감사

여기 내 jQuery 코드입니다.

Answer 1

AJAX는 비동기이기 때문에 아래와 같이 변형 또는 변형과 같이 getJSON 콜백 내부에 폴리선을 배치해야합니다 (LatLng이 실제로 만들어진 후). 그렇지 않으면 코드는 빈 위치 배열을 폴리 라인으로 설정하는 것입니다.

$.getJSON('json/markers.json', function(data) { 
    function(data) { 

     $(data).each(function(index, value) { 
      alert(value.x); 
      latlng = new google.maps.LatLng(value.x, value.y); 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: value.title, 
       icon: image 
      }); 
      positions[value.id - 1] = latlng; 

     }); 

     var flightPath = new google.maps.Polyline({ 
      path: positions, 
      strokeColor: "#FF0000", 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     flightPath.setMap(map); 

    });​ 
}