0

编辑： 我在过去几周试图解决我的问题。因为我是一个真正的初学者，所以我在工作进度中学习代码......我将尝试澄清我的问题，希望能告诉我答案。

正如我之前问过的那样：我正在开发一个基于谷歌地图 API 3 的网络应用程序。GPS 记录器正在为 Mysql 服务器上的一个表提供这些值：id、纬度、经度、日期、时间、用户 ID。我想创建多个独特的折线。对于每个日期组，一条新的折线。

正如我所说，我已经取得了一些进展，但我不太确定我是否走在正确的轨道上。

现在我不确定我得到了什么，连接的几条折线使它们变成一条大折线或彼此重叠的几条折线......另一个问题是，使用这段代码我似乎无法显示第一个“日期组折线”。

我已经在原始代码和 >> jsfiddle << 链接下方发布了较新的代码（尽管我没有设法让 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);
        }
    }   
});

任何帮助将不胜感激！

4

1 回答 1

0

我不确定您为什么要在客户端执行此操作，但一种方法是为每个日期创建一个点数组：

if (!points[date]) points[date] = [];
points[date].push(new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng"))));

然后从这些数组中的每一个创建您独特的折线。

于 2012-08-20T15:53:07.047 回答