javascript - 来自 geoJSON 的 Google map 航点

Question

我想从 geoJSON 文件加载行程。目前，它可以工作，但只有两点。

但我需要添加 4 或 5 个航路点。我的代码只读取前两个点并将它们设置为起点和目的地。

这是我的代码

 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();
        }
    }
});

有什么想法吗？我必须创建一个循环吗？或者更改航点的 json 代码？

这是我的 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"}
    }
]

  }

谢谢!

Answer 1

working fiddle

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);

要解决 Dr.Molle 关于在加载数据层之前触发 idle 事件的观点，您可以创建一个自定义 data_idle 事件，并在所有数据层加载之后触发该事件。来自 GeoJson 的点已被处理。

updated fiddle

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);