我想从 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"}
}
]
}
谢谢!
最佳答案
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 的点已被处理。
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);
关于javascript - 来自 geoJSON 的 Google map 航点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25272247/