Chcę załadować trasę z pliku Geojson. Na razie działa, ale tylko z dwoma punktami.

Ale muszę dodać 4 lub 5 punktów trasy. Mój kod przeczytał tylko dwa pierwsze punkty i ustaw je jako pochodzenie i miejsce docelowe.

Oto mój kod

 google.maps.event.addListener(map.data, 'addfeature', function (e) {

    if (e.feature.getGeometry().getType() === 'Point') {
        map.setCenter(e.feature.getGeometry().get());

        if (!origin) origin = e.feature.getGeometry().get(); //if origin does not exist

        else if (!destination) {
            destination = e.feature.getGeometry().get();

            calculate();
        }
    }
});

Dowolny pomysł ? Czy muszę stworzyć pętlę? Lub zmień kod JSON dla punktów trasy?

Oto mój JSON:

{
"type": "FeatureCollection",
"features":

 [

    { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [-73.562686, 45.4960413]},
        "properties": {"prop0": "value0"}
    },


    { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [-73.568367, 45.4933086]},
        "properties": {"prop0": "value0"}
    }
]

  }

Dzięki !

0
Tibo M 12 sierpień 2014, 23:12

2 odpowiedzi

Najlepsza odpowiedź

skrzypce robocze

function calculate() {
    var request = {
        origin: origin,
        waypoints: waypts,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

// global variables
var origin = null;
var destination = null;
var waypts = [];
var infowindow = new google.maps.InfoWindow();
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function initialize() {
    // Create a simple map.
    features = [];
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 4,
        center: {
            lat: -28,
            lng: 137.883
        }
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    google.maps.event.addListener(map, 'click', function () {
        infowindow.close();
    });
    // process the loaded GeoJSON data.
    google.maps.event.addListener(map.data, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            map.setCenter(e.feature.getGeometry().get());
            // set the origin to the first point
            if (!origin) origin = e.feature.getGeometry().get();
            // set the destination to the second point
            else waypts.push({
                location: e.feature.getGeometry().get(),
                stopover: true
            });
            // calculate the directions once both origin and destination are set 
            // calculate();
        }
    });
    google.maps.event.addListenerOnce(map, 'idle', function () {
        if (!destination) {
            destination = waypts.pop();
            destination = destination.location;
            // calculate the directions once both origin and destination are set 
            calculate();
        }
    });
    map.data.addGeoJson(data);
}

google.maps.event.addDomListener(window, 'load', initialize);

Aby rozwiązać punkt Dr.Molle'a o zdarzeniu {X0}} przed załadowaniem warstwy danych, możesz utworzyć niestandardowy wydarzenie data_idle i ogień, który wydarzenie po przetworzeniu wszystkich punktów z Geojson.

zaktualizowane skrzypce

var features_added = 0;
function initialize() {
    // Create a simple map.
    features = [];
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 4,
        center: {
            lat: -28,
            lng: 137.883
        }
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    google.maps.event.addListener(map, 'click', function () {
        infowindow.close();
    });
    // process the loaded GeoJSON data.
    google.maps.event.addListener(map.data, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            features_added++;
            map.setCenter(e.feature.getGeometry().get());
            // set the origin to the first point
            if (!origin) origin = e.feature.getGeometry().get();
            // set the destination to the second point
            else waypts.push({
                location: e.feature.getGeometry().get(),
                stopover: true
            });
            setTimeout(function() {features_added--; if (features_added <= 0) google.maps.event.trigger(map, 'data_idle');
                }, 500);
        }
    });
    google.maps.event.addListenerOnce(map, 'data_idle', function () {
        if (!destination) {
            destination = waypts.pop();
            destination = destination.location;
            // calculate the directions once both origin and destination are set 
            calculate();
        }
    });
    map.data.loadGeoJson("http://www.geocodezip.com/directions.json.txt");
}

google.maps.event.addDomListener(window, 'load', initialize);
1
geocodezip 28 grudzień 2019, 14:45

Problem polega na tym, że nie możesz uzyskać dostępu do FeatureClection, gdzie należy funkcję. Nie ma też wydarzenia, które wystąpi, gdy parsowanie Geojson został zakończony (gdy pożary AddFeature-Event nigdy nie będziesz wiedzieć, czy to ostatni raz dla konkretnego featureCollection)

Możesz przechowywać dodatkowe właściwości dla funkcji, np. liczba punktów trasy.

Próbki-JSON (w tym inne właściwości do zdefiniowania np. Jeśli punkt jest punktem początkiem, pochodzeniem lub miejscem docelowym lub gdy jest to punkt waypoint w indeksie trasy)

{
"type": "FeatureCollection",
"features": [
  {
    "type"        : "Feature",
    "properties"  : {route      :{"id"    :1,
                                  "type"  :"origin",
                                  "points":2
                                 }
                    },
    "geometry"    : {"type"       : "Point",
                     "coordinates":[8.528849, 52.030656]}
  },

  {
    "type"        : "Feature",
    "properties"  : {route        :{"id"    :1,
                                    "type"  :"destination",
                                    "points":2
                                   }
                    },
    "geometry"    : {"type"       : "Point",
                     "coordinates":[11.5819, 48.1351253]}
  },

  {
    "type": "Feature",
    "properties"  : {"route"      :{"id"    :1,
                                    "type"  :"waypoint",
                                    "index" :1,
                                    "points":2
                                   }
                    },
    "geometry"    : {"type"       : "Point",
                     "coordinates":[13.40495,52.52]}
  },

  {
    "type"        : "Feature",
    "properties"  : {route        :{"id":1,
                                    "type":"waypoint",
                                    "index":0,
                                    "points":2
                                   }
                    },
    "geometry"    : {"type"       : "Point",
                     "coordinates":[9.99368, 53.5510846]}
  }
]}

Przechowuje właściwości w niestandardowym route - nieruchomości.

Właściwości to:

  • type (pochodzenie, miejsce docelowe lub punktowe)
  • id (Niektóre unikalny identyfikator na trasie, używając identyfikatora, będziesz w stanie zdefiniować wiele tras)
  • points (Liczba punktów trasy zdefiniowanych dla trasy)
  • index ... Używany do typu: Waypoint (indeks punktów trasy w tablicy punktów trasy, począwszy od 0)

Parsowanie tych właściwości:

 map.data.addListener('addfeature',function(e){
  var geo=  e.feature.getGeometry();
  if(geo.getType()==='Point' && e.feature.getProperty('route')){
    var id    = e.feature.getProperty('route').id,
        type  = e.feature.getProperty('route').type,
        points= e.feature.getProperty('route').points,
        data;
    //the routes will be stored as a property of map.data
    if(!map.data.get('routes')){
        map.data.set('routes',{});
    }
    if(!map.data.get('routes')[id]){
      map.data.get('routes')[id]={waypoints:[],points:points,origin:null,destination:null};
    }

    data= map.data.get('routes')[id];
    switch(type){
      case 'waypoint':
        data.points--;
        data.waypoints[e.feature.getProperty('route').index]={location:geo.get()};
       break;
      default:
        data[type]= geo.get();

    }
    if(!data.points && data.origin && data.destination){
      //parsing of the route is complete
      delete data.points;
      //run the callback, 
      //data is an object suitable to be used as DirectionsRequest
      //you only need to add the desired travelMode
      callback(data);
    }
  }
 });

Demo: http://jsfiddle.net/doktormolle/vupkbasc/

0
Dr.Molle 12 sierpień 2014, 22:33