谷歌地图行程从geoJSON文件
Google Map itinerary from geoJSON file
我想在这个geoJSON文件中定义的2个标记之间画一个行程:
{
"type": "FeatureCollection",
"features":
[
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-73.563032, 45.495403]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-73.549762, 45.559673]},
"properties": {"prop0": "value0"}
}
]
}
这两个标记在地图上显示得很清楚。
现在我想创建一个行程(汽车),在这两个点之间。
我有这个javascript函数,它允许我从用户填写的表单中绘制行程:
function calculate() {
origin = document.getElementById('origin').value;
destination = document.getElementById('destination').value;
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
现在,我想用我的geoJSON文件中定义的2个点来替换"原点"answers"目的地",以便创建这两个点之间的行程。
你知道吗?
感谢您的帮助
一个可能的解决方案,使用谷歌地图数据层来显示您的GeoJSON。使用它来检索坐标并获得它们之间的方向。下面的代码假设有2个点(并使用带有2个点的示例):
工作小提琴function calculate() {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
// global variables
var origin = null;
var destination = null;
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 () {
infowidow.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 if (!destination) {
destination = e.feature.getGeometry().get();
// calculate the directions once both origin and destination are set
calculate();
}
}
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
相关文章:
- d3.js,是否可以将超链接附加到GeoJSON文件
- 从本地 geojson 文件地图框/传单创建 var
- 从GeoJson文件中获取单独的Lat和Lng值
- 我在哪里可以获得印度的.geojson文件,而不是每个州/地区的单独文件或任何其他区别
- 使用 JS 和 geojson 文件创建纽约市行政区的 d3 地图
- 情节:基于GeoJSON文件创建地图
- 发布到GEOJSON谷歌将数据映射到我的远程服务器上的json文件
- 使用实时数据对GeoJSON文件中的许多标记进行样式化
- 使用LEaflet将多个geoJSon文件查看到视图中
- 谷歌地图行程从geoJSON文件
- 字符串str总是空的,尽管它填充了.geojson文件中的数据
- 传单:加载geoJSON文件和特定的PopUp
- 自定义标记点从geoJson文件与谷歌地图
- mapbox不能与另一个.geojson文件一起工作的例子
- 引用geoJSON文件中的数据
- 解析geojson文件后,为什么在浏览器中看不到地图?
- 使用Google Maps Javascript API v3数据层设计多个GeoJson文件
- Mapbox使用loadURL处理多个GEOJSON文件
- 将存储在本地主机上的GeoJSON文件加载到Google Maps JavaScript SDK中
- 从GeoJSON文件添加图像到信息窗口?谷歌地图javascript API