1

私は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);

ヒントを教えてください。2 番目のコードは Google の例からのもので、固定の 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();
        });
    });
4

1 に答える 1

1

これは、更新されたコードに基づく更新です。これはかなり近いはずです。その変数に割り当てるのではなく、各位置を配列にプッシュする必要があります。flightPlanCoordinatesまた、その配列はグローバルである必要はありません。マップへのポリラインの追加に関して.setMap()は、元のコードでの呼び出しかmap、マーカーの場合と同様に以下のコードに示すように、ポリラインを作成するときにプロパティを使用できます。

また、ポリラインをmarkers配列にプッシュして、マーカーと一緒に削除します。この配列の名前を変更して、それが単なるマーカーではなく、基本的に更新時にマップから消去したいすべてのものであることを反映することができます。

また、このクリア コー​​ドを$.getJSON()呼び出し前に行うのではなく、コールバックに移動しました。これにより、新しいデータを待つ間、マーカーとポリラインを短時間非表示にする代わりに、更新がスムーズになります。

もう 1 つのヒント:配列で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();
    });
});
于 2013-07-04T19:13:27.730 に答える