Блог

В настоящее время у меня есть эти коды для загрузки файла 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') . "');


        });
  

Все хорошо, но я хочу заменить его линиями со стрелками вместо прямой линии. Возможно ли это? Если да, пожалуйста, помогите мне это сделать.

Чтобы добавить стрелки к полилиниям, созданным GPXParser, вам необходимо изменить эту библиотеку, чтобы предоставить доступ к полилиниям, см. Две строки и функцию, добавленную в эту библиотеку ниже. Затем получите полилинии и добавьте к ним стрелки, как показано ниже.

рабочий пример (основанный на примере из документации gpxviewer, на которую ссылались выше)

Изменения в коде из примера в документации:

 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
}