Google地图来自geoJSON文件的行程 [英] Google Map itinerary from geoJSON file

问题描述

  {$ b $}我想在两个标记之间绘制行程，这两个标记是在这个geoJSON文件中定义的：
 btype：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 = {
来源：原产地，
目的地：目的地，
 
 
 travelMode：google.maps。 TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
  

现在，我想将起源和目的地 ，在我的geoJSON文件中定义的2点，以创建这两点之间的行程。

有什么想法？

感谢您的帮助！

解决方案

一个可能的解决方案是，使用Google地图数据层显示您的GeoJSON 。用它来检索坐标并获得它们之间的方向。下面的代码假设2分（并用你的例子2分）：

工作小提琴

  function calculate（）{
 var request = {
来源：原产地，
目的地：目的地，
 
 
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
 
 //全局变量
 var origin = null; 
 var destination = null; 
 var infowindow = new google.maps.InfoWindow（）; 
 var directionsDisplay = new google.maps.DirectionsRenderer（）; 
 var directionsService = new google.maps.DirectionsService（）; 
 
函数initialize（）{
 //创建一个简单的地图。 
 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（）; 
}）; 
 //处理加载的GeoJSON数据。 
 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（）; 
 //设置目的地为第二个点
 else if（！destination）{
 destination = e.feature.getGeometry（）。get（）; 
 //一旦设定了起点和终点都计算方向
 calculate（）; 
} 
} 
}）; 
 map.data.addGeoJson（data）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

I'd like to draw an itinerary between 2 markers which are defined in this geoJSON file:

{
"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"}
    }
]

}

The two markers are displayed well on the map.

Now I want to create an itinerary (car), between those two points.

I have this javascript function, which allows me to draw an itinerary from a form filled by the user:

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

And now, I would like to replace the "origin" and "destination", by the 2 points defined in my geoJSON file, in order to create an itinerary between those two points.

Any idea ?

Thank you for your help !

解决方案

One possible solution, use the Google Maps Data Layer to display your GeoJSON. The use it to retrieve the coordinates and get directions between them. The below code assumes 2 points (and uses your example with 2 points):

working fiddle

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

这篇关于Google地图来自geoJSON文件的行程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！