Google Maps 데이터베이스의 좌표가있는 폴리 라인이 모든 브라우저에서 작동하지 않습니다.

Question

광산 프로젝트의 경우 데이터베이스에서 좌표 컬렉션을 가져 와서 이러한 점을 연결하는 폴리선이있는지도에 표시하려고합니다. 이렇게하려면 jQuery (처음으로)를 사용하여 데이터베이스에서 정보를 검색하여 배열에 배치합니다. 그런 다음이 배열을 사용하여지도에 표시 할 점을 만듭니다. 이상한 점은 크롬에서 완벽하게 작동하지만 파이어 폭스 나 인터넷 익스플로러에서는 작동하지 않는다는 것입니다 (아래 예 참조).

내 사이트 here에 페이지를 업로드 했으므로 데이터베이스 연결이 작동하는 것을 볼 수 있습니다. 비슷한 버전의 페이지를 만들었지 만 좌표를 수동으로 입력했습니다 (링크가 아래에 있음). 또한 아래의 파일을 제공하지만 여기에 내가 문제를 생각 곳의 코드 조각입니다 :

$.ajax({ 
    url: "shoreData.php", 
    dataType: "json", 
    // if the data is succesfully found 
    success: function (data) { 
     // place the data into latlngdata 
     latlngdata = data; 
     // to show that the correct data is collected (for feedback purposes) the first four elements are displayed 
     $("#status").html("Lat0: " + data[0] + "<br>" + 
      "Lon0: " + data[1] + "<br>" + 
      "Lat1: " + data[2] + "<br>" + 
      "Lon1: " + data[3] + "<br>" 
     ); 
    }, 
    // if there is an error shows so in #status 
    error: function (result) { 
     // update status 
     $("#status").html("Error :("); 
    } 
}); 

내가에만 허용하고 같이

// Creates an array which will store all the points to be connected on the map 
    var flightPlanCoordinates = []; 
    // takes the latitude and longitude information from latlngdata and creates points to be pushed onto the array 
    for(i=0;i < latlngdata.length;i=i+2) { 
     var point =new google.maps.LatLng(latlngdata[i],latlngdata[i+1]); 
     flightPlanCoordinates.push(point); 
    } 


    // specifies the polyline 
    flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
    // adds the line 
    addLine(); 

내가 여기 latlngdata에 대한 정보를 얻을 수

Everything

: 유래 stackoverflow.com하는 단순한 초보자으로 두 개의 링크를 사용하는 나는 모든 링크가있는 간단한 HTML 파일을 만든

• 실제는 두 버전에 대한 내 소스 파일이 포함 된 zip 파일
• 목표 보여줍니다 여러 브라우저 간의 비교 내 수동으로 입력 한 버전
• 파일 질문
• 이미지의 파일입니다 보여줍니다

이것을 읽어 주셔서 감사 드리며 아이디어가 있다면 정말 감사하겠습니다.

테오

Answer 1

일부 디버깅 후 오류가 발생했다고 생각합니다.

시작 부분에 2 개의 좌표 만 설정했기 때문에 함수에 LatLng 점이 하나만 정의되었습니다. 분명히

var latlngdata = [52.956281,4.760797];

당신은 선을 그릴 적어도 2 포인트가 필요하지만, LatLng 객체가 항상 제공이 개 좌표를 필요로하기 때문에 만, 하나를주고,하지만 당신은 적어도 4 개 좌표를 제공해야 그릴 수있는지도에서 2 점을 설정할 수 있어야합니다.

작업 예제를 사용하여 jsfiddle을 만들었습니다.이 예제는 사용자의 코드보다 약간 작지만 필요에 맞게 조정할 수 있어야합니다.

var map; 
var latlngdata = [52.956281,4.760797, 14.354862, 21.4883214]; //Just added two more random Coordinates 
var mapOptions = { 
    // sets zoom 
    zoom: 12, 
    // sets center 
    center: new google.maps.LatLng(latlngdata[0], latlngdata[1]), 
    // sets map type 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}; 
map = new google.maps.Map($('#map')[0], mapOptions); 

// Creates an array which will store all the points to be connected on the map 
var flightPlanCoordinates = []; 
// takes the latitude and longitude information from latlngdata and creates points to be pushed onto the array 
for(i=0;i < latlngdata.length;i=i+2) { 
    var point =new google.maps.LatLng(latlngdata[i],latlngdata[i+1]); 
    flightPlanCoordinates.push(point); 
} 

// specifies the polyline 
flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

// adds the line 
flightPath.setMap(map); 

다른 생각은 당신 아약스 전화가 작동,하지만 당신은지도에에서 나오는 데이터를 제공하지 않는 것이, 당신은지도 위를 표시 :

코드는이 다음이다 . 나는 모든 것이 완벽하게 작동 할 수 있도록지도에 데이터를 제공 할 것입니다.:)

그러나 그 다음에는 선을 그리기 전에 아약스 호출이 성공했는지 확인해야합니다. 그리기가 먼저 발생하면 데이터가 없기 때문에 선이 그려지지 않습니다.