Question

我目前有这些代码将GPX文件加载到Google地图

        function loadGPXFileIntoGoogleMap(map, filename) {
            $.ajax({url: filename,
                dataType: 'xml',
                success: function(data) {
                  var parser = new GPXParser(data, map);
                  parser.setTrackColour('#ff0000');     // Set the track line colour
                  parser.setTrackWidth(5);          // Set the track line width
                  parser.setMinTrackPointDelta(0.001);      // Set the minimum distance between track points
                  parser.centerAndZoom(data);
                  parser.addTrackpointsToMap();         // Add the trackpoints
                  parser.addWaypointsToMap();           // Add the waypoints
                }
            });
        }

        $(document).ready(function() {
            var mapOptions = {
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);

            loadGPXFileIntoGoogleMap(map, '" . base_url('gps/ajax/request/trace') . "');


        });

一切都很好，但我想用箭头线而不是直线替换它。可能吗？如果是，请帮我做。

Answer 1

为了向GPXParser创建的折线添加箭头，您需要修改该库以访问折线，请参阅下面两行和添加到该库的函数。然后获取折线并将箭头添加到它们中，如下所示。

working example (based off the example in the gpxviewer documentation referenced above)

example in the documentation的代码更改

function loadGPXFileIntoGoogleMap(map, filename) {
    $.ajax({url: filename,
        dataType: "xml",
        success: function(data) {
          var parser = new GPXParser(data, map);
          parser.setTrackColour("#ff0000");     // Set the track line colour
          parser.setTrackWidth(5);          // Set the track line width
          parser.setMinTrackPointDelta(0.001);      // Set the minimum distance between track points
          parser.centerAndZoom(data);
          parser.addTrackpointsToMap();         // Add the trackpoints

          // ********************  added  *******************************
          var polylines = parser.getPolylines();

          // documentation on pre-defined symbols and repeated symbols:
          //   https://developers.google.com/maps/documentation/javascript/symbols

          // Define a symbol using a predefined path (an arrow)
          // supplied by the Google Maps JavaScript API.
          var lineSymbol = {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
            strokeColor: '#00FF00',
            strokeOpacity: 1.0  
          };
          for (var i=0; i<polylines.length; i++) {
            polylines[i].setOptions({
              icons: [{
                icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  strokeColor:'#0000ff',
                  fillColor:'#0000ff',
                  fillOpacity:1,
                  scale: 3                
                },
                repeat:'100px'
               }]
            });
          }
          // *****************************end added**********************

          parser.addWaypointsToMap();           // Add the waypoints
        }
    });
}

对loadgpx.js库的更改：

function GPXParser(xmlDoc, map) {
    this.xmlDoc = xmlDoc;
    this.map = map;
    this.trackcolour = "#ff00ff"; // red
    this.trackwidth = 5;
    this.mintrackpointdelta = 0.0001
    this.polylines = [];  // **added**
}

// return a reference to the array of polylines **added function**
GPXParser.prototype.getPolylines = function() {
    return this.polylines;
}

GPXParser.prototype.addTrackSegmentToMap = function(trackSegment, colour,
        width) {
    var trackpoints = trackSegment.getElementsByTagName("trkpt");
    if(trackpoints.length == 0) {
        return;
    }

    var pointarray = [];

    // process first point
    var lastlon = parseFloat(trackpoints[0].getAttribute("lon"));
    var lastlat = parseFloat(trackpoints[0].getAttribute("lat"));
    var latlng = new google.maps.LatLng(lastlat,lastlon);
    pointarray.push(latlng);

    for(var i = 1; i < trackpoints.length; i++) {
        var lon = parseFloat(trackpoints[i].getAttribute("lon"));
        var lat = parseFloat(trackpoints[i].getAttribute("lat"));

        // Verify that this is far enough away from the last point to be used.
        var latdiff = lat - lastlat;
        var londiff = lon - lastlon;
        if(Math.sqrt(latdiff*latdiff + londiff*londiff)
                > this.mintrackpointdelta) {
            lastlon = lon;
            lastlat = lat;
            latlng = new google.maps.LatLng(lat,lon);
            pointarray.push(latlng);
        }

    }

    var polyline = new google.maps.Polyline({
        path: pointarray,
        strokeColor: colour,
        strokeWeight: width,
        map: this.map
    });
    this.polylines.push(polyline);  // **added
}

谷歌地图路线箭头线

1 个答案: