【问题标题】:Google Maps API v3 Polyline does not show when updatedGoogle Maps API v3 折线在更新时不显示
【发布时间】:2012-09-11 12:42:15
【问题描述】:

我想在谷歌地图上用折线绘制标记作为它们之间的连接。但 我无法在谷歌地图上显示我的折线。我已将折线和地图初始化为全局变量。标记正在显示,但折线没有呈现。

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

}

【问题讨论】:

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


    【解决方案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
    };
    

    或使用上述坐标作为 Google 文档示例:

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

    【讨论】:

    • 我想在这里写这个只是为了其他遇到问题的人。我有一个巨大的数据数组,最后一个条目不是数字,所以它不会显示没有错误。
    • 感谢您的回答,但我的问题是别的。
    • @ConradLotz 你能看看下面的问题吗? stackoverflow.com/questions/50646930/…我很感激我能得到的任何帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-19
    • 1970-01-01
    • 1970-01-01
    • 2012-07-17
    • 1970-01-01
    • 2014-03-09
    相关资源
    最近更新 更多