来自geoJSON的Google地图路标 [英] Google map waypoints from geoJSON
本文介绍了来自geoJSON的Google地图路标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从geoJSON文件加载行程。
目前，它可以工作，但只有两点。
但我需要添加4或5个航点。我的代码只读了两个第一点，并将它们设置为Origin和Destination。
这是我的代码
<$ p $ （）函数（e）{
if（e.feature.getGeometry（）。getType（） ==='Point'）{
map.setCenter（e.feature.getGeometry（）。get（））;
if（！origin）origin = e.feature.getGeometry（ ）.get（）; //如果origin不存在
else if（！destination）{
destination = e.feature.getGeometry（）。get（）;
calculate（）;
}
}
}）;
有什么想法吗？
我必须创建一个循环吗？
或更改航点的json代码？
以下是我的json：
{
type：FeatureCollection，
features：
[
{type：特征，
geometry：{type：Point，coordinates：[-73.562686,45.4960413]}，
properties：{prop0：value0}
$
$ b {type：Feature，
geometry：{type：Point，coordinates：[-73.568367 ，45.4933086]}，
properties：{prop0：value0}
}
]
}
=http://jsfiddle.net/kgg69/6/ =nofollow>工作小提琴 function calculate（）{
var request = {
origin：origin，
waypoints：waypts，
destination：destination，
travelMode：google.maps.TravelMode。驾驶
};
directionsDisplay.setPanel（document.getElementById（'directions-panel'））;
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
}
}）;
}
//全局变量
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（）;
函数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（）{
infowindow.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（）;
//设置目的地为第二个点$ b $ else else waypts.push（{
location：e.feature.getGeometry（）。get（），
stopover：true
}）;
//一旦设置了起点和终点，计算方向
// calculate（）;
}
}）;
google.maps.event.addListenerOnce（map，'idle'，function（）{
if（！destination）{
destination = waypts.pop（）;
destination = destination.location;
//一旦设定了起点和终点，计算方向
calculate（）;
}
}）;
map.data.addGeoJson（data）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
解决Dr.Molle关于闲置事件在数据层加载之前触发，您可以创建一个自定义 data_idle 事件，并在GeoJson中的所有点都被处理后触发该事件。
var features_added = 0;
函数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（）{
infowindow.close（）;
}）;
//处理加载的GeoJSON数据。
google.maps.event.addListener（map.data，'addfeature'，function（e）{
if（e.feature.getGeometry（）。getType（）==='Point'）{
features_added ++;
map.setCenter（e.feature.getGeometry（）。get（））;
//将原点设置为第一个点
if（！origin）原点= e.feature.getGeometry（）。get（）;
//将目的地设置为第二个点$ b $ else 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（）;
}
}）;
map.data.loadGeoJson（http://www.geocodezip.com/directions.json.txt）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
I want to load an itinerary from a geoJSON file.
For the moment, it works, but only with two points.
But I need to add 4 or 5 waypoints. My code only read the two first points and set them as Origin and destination.
Here's my code
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();
}
}
});
Any idea ?
Do I have to create a loop ?
Or change the json code for the waypoints ?
Here's my 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"}
}
]
}
Thanks !
解决方案 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);
To address Dr.Molle's point about the idle event firing before the data layer is loaded, you can create a custom data_idle event, and fire that event after all the points from the GeoJson have been processed.
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);
这篇关于来自geoJSON的Google地图路标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
