谷歌地图 api v3 绘制折线答案

【问题标题】：Google maps api v3 draw polyline谷歌地图 api v3 绘制折线
【发布时间】：2013-07-02 19:20:24
【问题描述】：

我是 javascript 新手，所以我在地图上绘制折线时遇到问题。我正在从车辆中的 GPS 接收坐标，我想绘制汽车运动。所以我在我的车经过的地方放了标记，但我不知道如何添加折线。有人可以帮帮我吗？

到目前为止我已经写了这个：

    var map;
    var markers=[];
    var timeout=5000;
    var interval=null;

    function init2(){
        var myLatlng = new google.maps.LatLng(45.7997016667,15.97143);
        var mapOptions = {
            zoom: 14,
            center: myLatlng,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        update_markers();
    }
    function update_markers(){
        console.log('update...');
        for(var x in markers){
            markers[x].setMap(null);
        }
        markers=[];
        $.getJSON('/get',
            function(d){
                var l=d.length;
                for(var x=l-5;x<l;x++){
                    var f1=parseFloat(d[x].lat);
                    var f2=parseFloat(d[x].long);
                    if(f1>100){
                        continue;
                        f1=f1/100.0;
                        f2=f2/100.0;
                    }

                    markers.push(new google.maps.Marker({
                        position: new google.maps.LatLng(f1, f2),
                        map: map,
                        title: d[x].time
                    }));
                }
            }
        );
        interval=setTimeout(update_markers, timeout);
    }

    google.maps.event.addDomListener(window, 'load', init2);

    $(function(){
        $('#timeout_sel').change(function(){
            clearTimeout(interval);
            timeout=$(this).val();
            update_markers();
        });
    });

而且我不知道如何将其放入我的代码中：

    function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  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 flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

你能给我一些建议吗？第二个代码来自谷歌示例，它使用固定的 latlng，我如何在可能的 update_markers 函数中添加它，以便它使用与标记相同的坐标？

编辑：

    var map;
    var markers=[];
    var timeout=5000;
    var interval=null;
    var flightPlanCoordinates=[];

    function init2(){
        var myLatlng = new google.maps.LatLng(45.7997016667,15.97143);
        var mapOptions = {
            zoom: 14,
            center: myLatlng,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        update_markers();
    }
    function update_markers(){
        console.log('update...');
        for(var x in markers){
            markers[x].setMap(null);
        }
        markers=[];
        $.getJSON('/get',
            function(d){
                var l=d.length;
                for(var x=l-5;x<l;x++){
                    var f1=parseFloat(d[x].lat);
                    var f2=parseFloat(d[x].long);
                    if(f1>100){
                        continue;
                        f1=f1/100.0;
                        f2=f2/100.0;
                    }

                    markers.push(new google.maps.Marker({
                        position: new google.maps.LatLng(f1, f2),
                        map: map,
                        title: d[x].time
                    }));
                    flightPlanCoordinates = new google.maps.LatLng(f1,f2);
                 }
                 var flightPath = new google.maps.Polyline({
         path: flightPlanCoordinates,
         strokeColor: '#FF0000',
         strokeOpacity: 1.0,
         strokeWeight: 2
             });
            }
        );
        interval=setTimeout(update_markers, timeout);
    }

    google.maps.event.addDomListener(window, 'load', init2);

    $(function(){
        $('#timeout_sel').change(function(){
            clearTimeout(interval);
            timeout=$(this).val();
            update_markers();
        });
    });

【问题讨论】：

看看你当前的代码和你想添加的代码。您是否看到两者之间有些部分是共同的，或者至少非常相似，有些部分是不同的？您已经有了共同的部分，现在您需要添加不同的部分。具体来说，这将是创建 flightPlanCoordinates 和 flightPath 并将其添加到地图的三个语句。
关于如何使用标记纬度而不是硬编码值的具体问题，请执行以下操作：（1）在标记循环之前创建一个空数组var flightPlanCoordinates = [];（2）每个添加标记时，将相同的LatLng 值（您的position）推送到该数组中。 (3) 循环结束后，新建PolyLine，添加到地图中。
我编辑了帖子，如果我做错了什么，您可以纠正我。我做了第一件事和第二件事。但我不确定如何：将其添加到地图中。

标签： javascript google-maps google-maps-api-3 polyline

【解决方案1】：

这是基于您更新的代码的更新。这应该非常接近。您需要将每个位置 push 到 flightPlanCoordinates 数组上，而不是分配给该变量。此外，该数组不需要是全局的。关于将折线添加到地图，可以是原始代码中的.setMap() 调用，也可以在创建折线时使用map 属性，就像对标记所做的那样，如下代码所示。

我还将折线推到markers 数组上，因此它将与标记一起被删除。您可能想要更改此数组的名称以反映它不仅仅是标记，而且基本上是您想要在更新时从地图中清除的所有内容。

我还将此清除代码移到了$.getJSON() 回调中，而不是在您拨打电话之前执行此操作。这将提供更平滑的更新，而不是在您等待新数据时让标记和折线暂时空白。

另一个提示：永远不要在数组上使用for..in 循环（使用setMap(null) 从地图中清除标记的循环）。请改用数字 for 循环。

var map;
var markers=[];
var timeout=5000;
var interval=null;

function init2(){
    var myLatlng = new google.maps.LatLng(45.7997016667,15.97143);
    var mapOptions = {
        zoom: 14,
        center: myLatlng,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    update_markers();
}
function update_markers(){
    console.log('update...');
    $.getJSON('/get',
        function(d){
            for(var i = 0;  i < markers.length;  ++i){
                markers[i].setMap(null);
            }
            markers=[];
            var polylineCoordinates = [];
            var l=d.length;
            for(var x=l-5;x<l;x++){
                var f1=parseFloat(d[x].lat);
                var f2=parseFloat(d[x].long);
                if(f1>100){
                    continue;
                    f1=f1/100.0;
                    f2=f2/100.0;
                }

                var position = new google.maps.LatLng(f1, f2);
                markers.push(new google.maps.Marker({
                    position: position,
                    map: map,
                    title: d[x].time
                }));
                polylineCoordinates.push( position );
            }
            markers.push(new google.maps.Polyline({
                map: map,
                path: polylineCoordinates,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            }));
        }
    );
    interval=setTimeout(update_markers, timeout);
}

google.maps.event.addDomListener(window, 'load', init2);

$(function(){
    $('#timeout_sel').change(function(){
        clearTimeout(interval);
        timeout=$(this).val();
        update_markers();
    });
});

【讨论】：

谢谢，你太棒了！！它正在工作！感谢您的提示，它们真的很有帮助。
酷，我很高兴能帮上忙。
@MichaelGeary，我收到一个错误，
404。 这是一个错误。

请求的 URL / maps/api/js/StaticMapService.GetMapImage?1m2&1i67108740&2i67108718&2e2&3u19&4m2&1u249&2u292&5m5&1e2&5sen-US&6sus&10b1&12b1&token=2152在这台服务器上。这就是我们所知道的一切。
您能否指导一下这个错误是什么以及我如何解决这个问题？
@AkashJain 这似乎与这个问题无关，所以你能把它作为一个新问题发布吗？确保包含一个重现问题的工作（即损坏的）测试用例，最好作为问题中的代码 sn-p，或者作为 JSFiddle 或 CodePen 等。这将使某人更容易查看。仅 404 错误并没有太多的余地。如果您愿意，请在发布问题后随时@我。谢谢！