Google Maps Polyline的数据库坐标在所有浏览器中均不起作用

Question

For a project of mine I am wanting to take a collection of coordinates from a database and show them on a map with poly-lines connecting these points. To do this I am using jQuery (for the first time) to retrieve the information from the database and place it into an array. This array is then used to create points to be displayed on the map. The odd thing is that it works perfectly in chrome, but not in firefox or internet explorer (An example is below).

I have uploaded the page to my site here you so can see it with the database connection working. I also created a similar version of the page but with the coordinates entered manually (link is below). I will also give the files below but here is a code snippet of where I think the issues is:

// 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();

I get the information for latlngdata 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 :(");
    }
});

As I am only allowed to use two links as a mere beginner to stackoverflow.com I have created a simple html file with links to everything:

Everything

• Real is the file in question
• Images shows a comparison between multiple browsers
• Goal shows my manually entered version
• Files is a zip file containing my sources files for both versions

Thanks a lot for reading this and if you have any ideas I would really appreciate it

Theo

Answer 1

I think i found your error after some debugging:

You only had one LatLng Point defined with your function because you only set 2 Coordinates at the beginning!

var latlngdata = [52.956281,4.760797];

Obviously you need at least 2 Points to draw a line, but you only give one, because a LatLng object always needs 2 Coordinates, which you provide, but you need to provide at least 4 Coordinates to be able to set 2 Points on the map where you can draw from.

I created a jsfiddle with a working example, which is a bit smaller then your code here, but you should be able to adapt it to your needs.

The code is the following:

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);

The other think is that you Ajax Call is working, but you don't give the data coming from it to the map, you only display it above the map. I you would give the data to the map also all would work perfectly! :)

But then you should gurantee that the ajax call succeeded before trying to draw the line, if the drawing happens first no Line will be drawn because the data is not there.