Googleマップ：ライブ描画とポリラインの更新

Question

私はJSの初心者です。申し訳ありませんが、私のコードは添付されていません。

問題：何か問題があります： ユーザーの現在の位置に応じてポリラインを描きたいと思います。したがって、それぞれgoogle.maps.LatLng（）は現在のところ座標を持つ必要があります。地図上では、例えば、5秒に1回、全面的に更新する必要があります。最終的には、地図上を歩いている朝の視覚化のようなものです。

私は []マップ「を描く」とのvar flightPlanCoordinatesでポイントを追加する方法を、知っている、と私は私が見つけることができるいくつかの例やリンク、を尋ねる：

• 電流を加える方法のvar flightPlanCoordinatesへの位置は[]
• は "ライブ" モードでは、すべてこのようなものの更新を作る方法

任意の助けの

感謝:)

UPD：

はこのようなものをやろうとしているが、

var path = poly.getPath(); 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 

path.push(new google.maps.LatLng(latitude, longitude)); 

UPD2動作しません： は、ここでそれはhttp://kasheftin.github.io/gmaps/

どうあるべきか、クールな例です

Answer 1

ポリラインを新しいパス（新しいポイントで更新されたパス）で更新する必要があります。

// get existing path 
var path = poly.getPath(); 
// add new point 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
// update the polyline with the updated path 
poly.setPath(path); 

コードスニペット：（ポリラインにポイントを追加するには地図をクリック）

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var poly = new google.maps.Polyline({ 
 
    map: map, 
 
    path: [] 
 
    }) 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    // get existing path 
 
    var path = poly.getPath(); 
 
    // add new point (use the position from the click event) 
 
    path.push(new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng())); 
 
    // update the polyline with the updated path 
 
    poly.setPath(path); 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

以下のコード試してみてください。今のよう

var path = poly.getPath().getArray(); 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
poly.setPath(path); 

Answer 3

を、 APIを使用すると、新しいLatLngオブジェクトをにプッシュするだけで済みますは地図上で更新されます。

そのComplex Polyline例が示すように、あなたが行うことができます：polyはあなたのgoogle.maps.PolylineとlatLnggoogle.maps.LatLngある

var path = poly.getPath() 
path.push(latLng) 

。