在谷歌地图api上绘制线条

时间:2015-11-27 11:56:02

标签: google-maps google-maps-api-3 google-maps-markers

我可以使用以下代码在地图上绘制线条:

$(id).is(":visible")

但是在一个真实的应用程序中,因为我们从db获取数据并填充它,我无法在地图上获取这些行 所以,这是对象声明和初始化:

var flightPlanCoordinates1 = [
    { lat: 22.53412218657744, lng: -95.4580076783896 },
    { lat: 25.265810430433756, lng: -96.51269517838955 },
    { lat: 24.308304859959954, lng: -92.4916990846396 },
    { lat: 28.150714091845007, lng: -94.07373033463955 },
    { lat: 26.530793950651773, lng: -89.92089830338955 },
    { lat: 25.5635039073037, lng: -87.63574205338955 },
    { lat: 26.491469591982202, lng: -85.30664049088955 },
    { lat: 28.65323578152034, lng: -86.80078111588955 },
    { lat: 28.845876611067364, lng: -88.91015611588955 },
    { lat: 27.587415049297192, lng: -88.33886705338955 },
    { lat: 25.84068541364038, lng: -94.00781236588955 }
];

var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates1,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(map);

对象中的数据如下:

flightPlanCoordinates = [];

for (var i = 0; i < jsonOut.length; i++) {
    jsonCor["lat"] = jsonOut[i]["lat"];
    jsonCor["long"] = jsonOut[i]["long"];
    flightPlanCoordinates.push(jsonCor);
}

var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(map);

所以就在上面的例子中。

构造的对象有什么问题?

1 个答案:

答案 0 :(得分:1)

你可能需要这样做:

for (var i = 0; i < jsonOut.length; i++) {
    flightPlanCoordinates.push({
        lat: parseFloat(jsonOut[i]["lat"]),
        lng: parseFloat(jsonOut[i]["long"]
    });
}

首先让坐标的结构与原来的坐标相匹配,即{lat: x, lng: y}而不是{lat, x, long: y}

其次,因为您正在从JSON中读取它,您可能还需要对值进行parseFloat(),否则它们可能是字符串。