Я новичок, я читаю в Интернете о возможностях openstreetmap, а также читал об открытых слоях ... Для начала мне нужно получить местоположение и создать соответствующую карту ... Я нашел хороший пример с openlayers, это код:
<html>
<head>
<title>HTML5 geolocation with Openstreetmap and OpenLayers</title>
<style type="text/css">
html, body, #basicMap {
width: 240;
height: 320;
margin: 10;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + " Longitude: " +
position.coords.longitude + "<p>";
var lonLat = new OpenLayers.LonLat(position.coords.longitude,
position.coords.latitude)
.transform(
new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
map.getProjectionObject() //to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.setCenter(lonLat, 14 // Zoom level
);
});
//map = new OpenLayers.Map("basicMap");
//var mapnik = new OpenLayers.Layer.OSM();
//map.addLayer(mapnik);
map.setCenter(new
OpenLayers.LonLat(3,3) // Center of the map
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
), 15 // Zoom level
);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
}
</script>
</head>
<body onload="init();">
<center>
HTML5 geolocation:
<br>
<div id="basicMap"></div>
<br>HTML5 geolocation<br>
<br>with Openstreetmap and OpenLayers<br>
For Android Froyo,iPhone,iPAD,iPod
<br>
Your position estimated by browser geolocation API:<p>
<div id="anzeige">(will be displayed here)<p></div>
<a href="http://www.dr-bischoff.de">Andreas Bischoff</a>
<br>(view source to see how it works
</center>
</body>
</html>
Здесь вы можете увидеть живой пример: http://www.pediaphon.org/~bischoff/location_based_services/ Следующим шагом мне нужно нарисовать скретч-линию, которая отображает пройденный рут. Вот живой пример рисования линий (нажатие Shift + щелчок мышью): http://openlayers.org/dev/examples/draw-feature.html
Но я новичок, и я потерялся в том, как вызвать api openlayers, чтобы провести линию от источника к месту назначения ... любая помощь приветствуется
С наилучшими пожеланиями.
РЕДАКТИРОВАТЬ: Я просто скопировал этот кусок кода (Рисование пути с линией в OpenLayers с использованием JavaScript) непосредственно перед тегом, но я не вижу нарисованной линии:
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var points = new Array(
/*I put these coords of my city*/
new OpenLayers.Geometry.Point(-3.7904085, 37.76225609999999 ),
new OpenLayers.Geometry.Point(-4.7904085, 39.76225609999999 )
);
var line = new OpenLayers.Geometry.LineString(points);
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
