[英]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.