谷歌地图api v3绘制折线
Google maps api v3 draw polyline
我是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);
你能给我一些建议吗?第二个代码来自谷歌示例,它使用固定的标记,我如何在mayupdate_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()
回调中,而不是在进行调用之前执行。这将提供更平滑的更新,而不是在等待新数据时短时间内清除标记和多段线。
另一个提示:永远不要使用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();
});
});
相关文章:
- 如何用d3.js绘制折线图
- d3绘制动画折线图的基本示例
- 如何在不使用外部库的情况下使用 JavaScript 绘制折线图
- AngularJS nvd3折线图指令未在数据更改时重新绘制(非实时)
- 用不同的x轴数据集绘制谷歌折线图
- 如何隐藏由Chart.js V2.0绘制的组合折线图和条形图中的点
- 根据ajax重新绘制并破坏旧的折线图后,关于折线图(chart.js)的丢点工具提示
- 用谷歌图表json数据绘制简单的折线图,日期在x轴上
- 如何在高图表中使用系列数据绘制折线图
- D3js:如何使用 JSON 数据绘制多系列折线图
- 谷歌地图:实时绘制和更新折线
- 当 ykey 值等于 0 且 xkey 为月时绘制折线图
- 在多个标记之间绘制折线
- 在没有坐标的情况下绘制的折线闪烁
- 绘制一个具有三个轴向的谷歌折线图
- 谷歌地图JavaScript绘制折线
- 在 flot.js 中绘制折线图和条形图以获取 JSON 数据
- 如何通过单击绘制多条折线
- 谷歌地图API - 在数组中使用Lat Lng坐标绘制折线飞行路径
- 谷歌地图,折线绘制"extra"Line -can'看不到发生了什么