javascript - Google Maps API v3 折线在更新时不显示

Question

我想在谷歌地图上用折线绘制标记作为它们之间的连接。但我无法在谷歌地图上显示我的折线。我已将折线和地图初始化为全局变量。标记正在显示，但折线只是不渲染。

function initialize() {
var mapOptions = {
    zoom : 13,
    center : oldenburg,
    mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var polyOptions = {
        strokeColor : '#FF3333',
        strokeOpacity : 1.0,
        strokeWeight : 3
    };
    path = new google.maps.Polyline(polyOptions);
    path.setMap(map);
}
function addPlaces(orte) {

for ( var i = 0; i < orte.length; i++) {
    var ort = toLatLng(orte[i][0], orte[i][1]);
     path.getPath().push(ort);

    marker = new google.maps.Marker({
        position : ort,
        title : '#' + orte[i][2],
        icon : image,
        map : map
    });
}

}

Answer 1

在实例化折线时尝试指定路径：

示例： Google 示例坐标

var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];

以代码上的坐标为例

var polyOptions = {
    path: flightPlanCoordinates, //IMPORTANT TO SET the PATH for the line to RENDER
    strokeColor : '#FF3333',
    strokeOpacity : 1.0,
    strokeWeight : 3
};

或者作为使用上述坐标的谷歌文档示例：

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