javascript 谷歌地图api v3绘制折线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17476160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps api v3 draw polyline
提问by la lluvia
I'm new in javascript so i have problem with drawing polyline on my map. I'm receiving coordinates from GPS in vehicle and i want to draw car movement. So for i put markers on the places my car passed, but i'm not sure how to add polyline. Can anybody help me?
我是 JavaScript 新手，所以我在地图上绘制折线时遇到问题。我正在从车载 GPS 接收坐标，我想绘制汽车运动。所以我在我的车经过的地方做了标记，但我不知道如何添加折线。有谁能够帮我？
I've written this so far:
到目前为止我已经写了这个：
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();
});
});
And i don't know how to put this into my code:
我不知道如何将其放入我的代码中：
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);
Can you give me some tips? The second code is from google examples and it uses fixed latlng, how do i add this in may update_markers function so it uses the same coordinates as marker?
你能给我一些建议吗？第二个代码来自谷歌示例，它使用固定 latlng，我如何将它添加到 may update_markers 函数中，以便它使用与标记相同的坐标？
EDIT:
编辑：
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();
});
});
采纳答案by Michael Geary
Here's a update based on your updated code. This should be pretty close. You need to pusheach position onto the flightPlanCoordinatesarray, not assign to that variable. Also that array doesn't need to be global. Regarding adding the polyline to the map, that's either the .setMap()call in the original code, or you can use the mapproperty when you create the polyline, as you do for the markers and shown in the code below.
这是基于您更新的代码的更新。这应该非常接近。您需要将每个位置推到flightPlanCoordinates数组上，而不是分配给该变量。此外，该数组不需要是全局的。关于将多段线添加到地图，这可以是.setMap()原始代码中的调用，也可以map在创建多段线时使用该属性，就像对标记所做的那样，并在下面的代码中显示。
I also pushed the polyline onto the markersarray so it will be removed along with the markers. You may want to change the name of this array to reflect that it's not just markers but basically is everything you want to clear from the map on an update.
我还将折线推到markers阵列上，以便将其与标记一起删除。您可能想要更改此数组的名称，以反映它不仅仅是标记，而且基本上是您想在更新时从地图中清除的所有内容。
I also moved this clearing code into the $.getJSON()callback instead of doing it before you make the call. This will give a smoother update instead of blanking the markers and polyline for a short time while you wait for the new data.
我还将此清除代码移到$.getJSON()回调中，而不是在您拨打电话之前进行。这将提供更平滑的更新，而不是在您等待新数据时暂时消隐标记和折线。
Another tip: never use a for..inloop on an array (the loop that clears the markers from the map with setMap(null)). Use a numeric forloop instead.
另一个提示：永远不要在数组上使用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();
});
});
