Voy a hacer una página para ver las rutas con openlayers, postgresql / postgis y pgrouting. La parte del asiento ya está bien, estoy usando los datos de OSM. La imagen de abajo es para ilustrar lo que estoy haciendo ahora: una página donde el usuario introduce el origen y el destino y voy a hacer la geocodificación estas direcciones para jugar las coordenadas en mi sql para obetr la ruta.
Y se está produciendo el siguiente error, he visto varios post sobre el tema pero no me queda claro como puedo solucionarlo.
XMLHttpRequest cannot load http://www.openrouteservice.org/php/OpenLSLUS_Geocode.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. /C:/Desenv/FitTaxi/FitTaxi/index.html:1
Uncaught TypeError: Cannot read property 'documentElement' of nullMi código javascript:
<script type='text/javascript'>
var map;
function init() {
map = new OpenLayers.Map('map_element',{
maxExtent: new OpenLayers.Bounds(
-128 * 156543.0339,
-128 * 156543.0339,
128 * 156543.0339,
128 * 156543.0339),
maxResolution: 156543.0339,
units: 'm',
projection: new OpenLayers.Projection('EPSG:900913'),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
});
var osm_layer = new OpenLayers.Layer.OSM(
'OpenStreetMap Layer'
);
map.addLayers([osm_layer]);
var point = new OpenLayers.LonLat(-51.22,-30.08);
point.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.setCenter(point, 12);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
function submitForm() {
var queryString = document.getElementById('origem').value;
OpenLayers.Request.POST({
url: "http://www.openrouteservice.org/php/OpenLSLUS_Geocode.php",
scope: this,
failure: this.requestFailure,
success: this.requestSuccess,
headers: {"Content-Type": "application/x-www-form-urlencoded"},
data: "FreeFormAdress=" + encodeURIComponent(queryString) + "&MaxResponse=1"
});
}
function requestSuccess(response) {
var format = new OpenLayers.Format.XLS();
var output = format.read(response.responseXML);
if (output.responseLists[0]) {
var geometry = output.responseLists[0].features[0].geometry;
var foundPosition = new OpenLayers.LonLat(geometry.x, geometry.y).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter(foundPosition, 16);
} else {
alert("Sorry, no address found");
}
}
function requestFailure(response) {
alert("An error occurred while communicating with the OpenLS service. Please try again.");
}
</script>Código HTML:
Llama al mapa...
<body onload='init();'>
<div class="form-group">
<label for="inputOrigem" class="col-sm-2 control-label">Origem</label>
<input type="text" id="origem" class="form-control" placeholder="Origem">
<label for="inputDestino" class="col-sm-2 control-label">Destino:</label>
<input type="text" id="destino" class="form-control" placeholder="Destino">
<hr />
<button type="submit" value="submit" onclick="submitForm();" class="btn btn-default">Pesquisar</button>
</div>
</body>
