[英]Google maps api v3 draw polyline
我是Java語言的新手,因此在地圖上繪制折線時遇到問題。 我正在從車輛中的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);
你能給我一些提示嗎? 第二個代碼來自google示例,它使用固定的latlng,如何在may 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
數組,而不是分配給該變量。 同樣,該數組不必是全局的。 關於將折線添加到地圖,這可以是原始代碼中的.setMap()
調用,也可以在創建折線時使用map
屬性,就像對標記所做的操作一樣,如以下代碼所示。
我也將折線推到了markers
數組上,以便將其與標記一起刪除。 您可能想要更改此數組的名稱,以反映它不僅是標記,而且基本上是您要在更新時從地圖上清除的所有內容。
我還將清除代碼移到$.getJSON()
回調中,而不是在進行調用之前進行了處理。 等待新數據時,這將使更新更流暢,而不會在短時間內使標記和折線空白。
另一個提示:永遠不要in
數組上使用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();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.