Hallo Comunity,
ich arbeite gerade an einer Taxi Racing App mit meinem Team.
Jetzt habe ich die Karte mit dem Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Taxi Racing App : Gruppe Alpha</title>
<link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
<style type="text/css">
.olControlTextButtonPanel.vpanel {
top: 8px;
right: 8px;
left: auto;
}
.olControlTextButtonPanel.hpanel {
top: auto;
bottom: 8px;
left: 8px;
right: auto;
}
.button1ItemInactive:after,
.button1ItemActive:after {
content: "1";
}
.button2ItemInactive:after,
.button2ItemActive:after {
content: "2";
}
.button3ItemInactive:after,
.button3ItemActive:after {
content: "3";
}
.button4ItemInactive:after,
.button4ItemActive:after {
content: "4";
}
.button5ItemInactive:after,
.button5ItemActive:after {
content: "5";
}
.button6ItemInactive:after,
.button6ItemActive:after {
content: "6";
}
.button7ItemInactive:after,
.button7ItemActive:after {
content: "7";
}
.button8ItemInactive:after,
.button8ItemActive:after {
content: "8";
} .button9ItemInactive:after,
.button9ItemActive:after {
content: "9";
}
.button10ItemInactive:after,
.button10ItemActive:after {
content: "10";
}
</style>
<script src="http://dev.openlayers.org/lib/Firebug/firebug.js"></script>
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 6.8558292;
var lat = 50.8417126;
var zoom = 5;
var map, layer;
var untiled;
var tiled;
var pureCoverage = false;
function init(){
map = new OpenLayers.Map( 'map', {} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"[url]http://193.70.60.44:8080/geoserver/taxi/wms[/url]", {layers: 'strassenundtaxiroute'} );
map.addLayer(layer);
var bounds = new OpenLayers.Bounds(
6.8558292, 50.8417126,
6.9573767, 50.9428714
);
var b1 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 1 clicked!") },
displayClass: "button1"
});
var b2 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 2 clicked!") },
displayClass: "button2"
});
var b3 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 3 clicked!") },
displayClass: "button3"
});
var b4 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 4 clicked!") },
displayClass: "button4"
});
var b5 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 5 clicked!") },
displayClass: "button5"
});
var b6 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 6 clicked!") },
displayClass: "button6"
});
var b7 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 7 clicked!") },
displayClass: "button7"
});
var b8 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 8 clicked!") },
displayClass: "button8"
});
var b9 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 9 clicked!") },
displayClass: "button9"
});
var b10 = new OpenLayers.Control.Button({
trigger: function() { alert("Button 10 clicked!") },
displayClass: "button10"
});
var vpanel = new OpenLayers.Control.TextButtonPanel({
vertical: true,
additionalClass: "vpanel"
});
vpanel.addControls([
b1, b2,b3,b4,b5
]);
var hpanel = new OpenLayers.Control.TextButtonPanel({
additionalClass: "hpanel"
});
hpanel.addControls([
b5, b6, b7,b8,b9,b10
]);
var pois = new OpenLayers.Layer.Text( "Taxen",
{ location:"./textfile.txt",
projection: map.displayProjection
});
map.addLayer(pois);
map.addControl(vpanel);
map.addControl(hpanel);
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom)
map.zoomToExtent(bounds);
;
}
</script>
</head>
<body onload="init()">
<h1 id="title">Taxi Racing App : Gruppe Alpha</h1>
<div id="tags">
Taxi Racing App : Gruppe Alpha
</div>
<p id="shortdesc">
</p>
<div id="panel"></div>
<div id='map' style='width: 1300px; height: 550px;'></div>
<div id="wrapper">
<div id="location">Location</div>
<div id="scale">
</div>
</div>
</body>
</html>
dargestellt und ich kriege per API → app.get(‘/taxi_server/api/v1.0/taxi’, taxiController.list);
ein Objekt zurück, dass mir die Koordinaten von den Taxis zurückgibt. Wie kann ich das implementieren angehen, habt ihr da Ideen?
Wie kann ich diese Taxis anzeigen auf der Map?