绘制线 - 谷歌地图APIv3

Question

我想达到的目标 -

我有2个变量 - 纬度经度&，无一不是在后台更新。我想根据正在更新的变量绘制一条线。

我在想什么 -

1. 创建阵列的路径。
2. 创建线。
3. 更新使用的setInterval

代码中该行的路径 -

var poly; 

function initialize() { 

var Latitude 
var Longitude 

Latitude= {code that updates} 
Longitude= {code that updates} 

//create map 
var mapOptions = { 
zoom: 8, 
} 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var path = []; 

poly = new google.maps.Polyline({ 
path: path, 
geodesic: true, 
strokeColor: '#FF0000', 
strokeOpacity: 1.0, 
strokeWeight: 2 
}); 

poly.setMap(map); 



var myVar = setInterval(function(){updateposition()},2000); 

function updateposition(){ 
path.push(new google.maps.LatLng(Latitude,Longitude)); 
} 
} 

问题 - 没有线出现在所有:(

Answer 1

您需要更新的路径属性polyline（poly.setPath（path））更新路径后，仔细查看你的代码，我不确定你期望经纬度如何更新它们的位置（本地初始化函数）

function updateposition(){ 
    path.push(new google.maps.LatLng(Latitude,Longitude)); 
    poly.setPath(path); 
} 

here is an example that updates the polyline from computed coordinates based on the time

var poly; 
var Latitude = null; 
var Longitude = null; 
var map = null; 
var path = []; 

function initialize() { 
    //create map 
    var mapOptions = { 
    zoom: 2, 
    center:new google.maps.LatLng(0,0) 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    poly = new google.maps.Polyline({ 
    path: path, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    poly.setMap(map); 

    var myVar = setInterval(function(){updateposition()},2000); 
} 
function updateposition(){ 
    var date = new Date(); 
    var time = date.getMinutes()*60+date.getSeconds(); 
    Latitude= 45*Math.sin((time-1800)*Math.PI/1800.0) 
    Longitude= (time/10)-180; 
    path.push(new google.maps.LatLng(Latitude,Longitude)); 
    if (path.length == 1) { 
    map.setCenter(path[0]); 
    map.setZoom(8); 
    } else { 
    map.setCenter(path[path.length-1]); 
    } 
    poly.setPath(path); 
} 
google.maps.event.addDomListener(window, 'load', initialize);