编辑:过去几周我一直在努力解决我的问题。由于我是一个真正的初学者,我正在工作过程中学习代码。。。我会尽力澄清我的问题,希望能给我答案。
正如我之前所问的:我正在开发一个基于谷歌地图API 3的网络应用程序。一个GPS记录器正在Mysql服务器上为一个表提供这些值:id、纬度、经度、日期、时间、userid。我想创建多条唯一的多段线。对于每个日期组一条新的多段线。
正如我所说,我已经取得了一些进步,但我不太确定我是否走上了正轨。
现在我不确定我得到的是什么——连接的几条多段线,使它们成为一条大的多段线或几条重叠的多段线上。。。另一个问题是,使用此代码,我似乎无法显示第一个"日期组多段线"。
我已经在原始代码下面发布了更新的代码,并发布了一个>>jsfiddle<lt;链接(尽管我没能让jsfiddle在我这边工作)。
我认为这不再是谷歌地图的问题,但如果有人能帮助我解决和理解它,我将不胜感激
这是我之前发布的代码部分:
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("output-xml.php", function(data)
{
var points=[];
var markerbgn=[];
var markerend=[];
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var date = markers[i].getAttribute("date");
var time = markers[i].getAttribute("time");
var timebgn = markers[0].getAttribute("time");
var timeend = markers[markers.length-1].getAttribute("time");
var type = markers[i].getAttribute("usid");
points[i] = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html1 = "<b>" + date + "</b> <br/>" + timebgn + "</b> <br/>" + "Start Point";
var html2 = "<b>" + date + "</b> <br/>" + timeend + "</b> <br/>" + "End Point";
var content2 = "<b>" + "User: " + type + "</b> <br/>" + date + "</b> <br/>" + "User Route";
var encoded_path = google.maps.geometry.encoding.encodePath(points);
console.log(encoded_path);
}
var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);
// Polyline
var polyOptions = {
path: decoded_path,
map: map,
clickable: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
}
//line text
var info = decoded_path;
// Polyline
var polyline = new google.maps.Polyline(polyOptions);
polyline.setMap(map);
createInfoWindow(polyline, map, infoWindow, content2);
这是更新的代码:
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
downloadUrl("output-xml.php", function(data) {
var markerbgn=[];
var markerend=[];
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var routeNum = [];
var mPoints =[];
for (var i = 0; i < markers.length-1; i++) {
var date = markers[i].getAttribute("date").split("-").join("");
var dateAdv = markers[i+1].getAttribute("date").split("-").join("");
var datePrv = [];
var dateEnd = markers[markers.length-1].getAttribute("date").split("-").join("");
var time = markers[i].getAttribute("time");
var timebgn = markers[0].getAttribute("time");
var timeend = markers[markers.length-1].getAttribute("time");
var type = markers[i].getAttribute("usid");
var routesCng=[];
var points=[];
if (dateAdv != date){
if (!routesCng) routesCng=[];
routesCng = i;
routeNum++;
for (var k = 0; k < markers.length; k++) {
points.push(new google.maps.LatLng(
parseFloat(markers[k].getAttribute("lat")),
parseFloat(markers[k].getAttribute("lng"))));
}
setPoints();
setPolyline();
}
//alert([datePrv,time,dateAdv]); //**********************************
var html1 = "<b>" + date + "</b> <br/>" + timebgn + "</b> <br/>" + "Start Point";
var html2 = "<b>" + date + "</b> <br/>" + timeend + "</b> <br/>" + "End Point";
var content2 = "<b>" + type + "</b> <br/>" + dateAdv + "</b> <br/>" + "User Route";
}
function setPoints() {
mPoints = points.splice([routesCng]);
//alert([date,routesCng,dateAdv,routeNum]);
}
function setPolyline() {
alert([date,routesCng,dateAdv,routeNum,mPoints]);
var encoded_path = google.maps.geometry.encoding.encodePath(mPoints);
console.log(encoded_path);
var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);
var polyOptions = {
path: decoded_path,
map: map,
clickable: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
}
// Polyline
var polyline = new google.maps.Polyline(polyOptions);
//line text
var info = decoded_path;
polyline.setMap(map);
createInfoWindow(polyline, map, infoWindow, content2);
if(decoded_path.length!=0){
markerbgn = new google.maps.Marker({
map: map,
position: decoded_path[0],
draggable: false,
visible: true
});
markerend = new google.maps.Marker({
map: map,
position: decoded_path[decoded_path.length-1],
draggable: false,
visible: true
});
bindInfoWindow(markerbgn, map, infoWindow, html1);
bindInfoWindow(markerend, map, infoWindow, html2);
}
}
});
任何帮助都将不胜感激!
我不知道你为什么要在客户端中这样做,但有一种方法是为每个日期创建一个点数组:
if (!points[date]) points[date] = [];
points[date].push(new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))));
然后从每个数组中创建唯一的多段线。