Question

对于我的一个项目，我想从数据库中获取坐标集合，并在地图上显示它们，多边形线连接这些点。为此，我使用jQuery（第一次）从数据库中检索信息并将其放入数组中。然后使用该数组创建要在地图上显示的点。奇怪的是它在chrome中完美运行，但在firefox或Internet Explorer中却没有（下面是一个例子）。

我已将网页上传到我的网站here，您可以通过数据库连接查看它。我还创建了一个类似版本的页面，但手动输入了坐标（链接如下）。我还将提供下面的文件，但这里是我认为问题的代码片段：

// 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的信息：

$.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 :(");
    }
});

由于我只允许使用两个链接作为stackoverflow.com的初学者，我创建了一个简单的html文件，其中包含指向所有内容的链接：

Everything

Real是有问题的文件
图片显示了多个浏览器之间的比较
目标显示我手动输入的版本
Files是一个zip文件，其中包含两个版本的源文件

非常感谢您阅读本文，如果您有任何想法我会非常感激

西奥

Answer 1

我想我在调试后发现了你的错误：

您的功能只定义了一个LatLng Point，因为您只在开头设置了2个坐标！

var latlngdata = [52.956281,4.760797];

显然你需要至少2个点来绘制一条线，但是你只需要一个，因为LatLng对象总是需要2个坐标，你需要提供，但你需要提供至少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);

另一个想法是你的Ajax Call正在运行，但是你没有将来自它的数据提供给地图，你只能在地图上方显示它。我会把数据提供给地图也一切都会完美！ :)

但是你应该保证ajax调用在尝试绘制线之前成功，如果绘图首先发生，则不会绘制Line，因为数据不存在。

带有数据库坐标的Google Maps Polyline无法在所有浏览器中使用

1 个答案: