Re: Route anzeigen
Verfasst: 22. Feb 2014, 21:31
Hallo wer kann mir weiterhelfen mit dem Problemm route anzeigen
Code: Alles auswählen
<html>
<body>
<div id="KarteRoute"></div>
<div id="KarteZiel"></div>
<div id="RouteZumEinsatzort"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script>
<script type="text/javascript">
function initialize()
{
var myOptions = {mapTypeId: google.maps.MapTypeId.ROADMAP};
KarteRoute = new google.maps.Map(document.getElementById("KarteRoute"), myOptions);
RouteZumEinsatzort.setMap(KarteRoute);
RouteZumEinsatzort.setPanel(document.getElementById("RouteZumEinsatzort")); //Wegbeschreibung
var myOptions_Ziel = {mapTypeId: google.maps.MapTypeId.HYBRID};
KarteZiel = new google.maps.Map(document.getElementById("KarteZiel"), myOptions_Ziel);
RouteZumEinsatzortZiel.setMap(KarteZiel);
}
function showRoute()
{
if (Standort.A != Einsatzort.A && Standort.k != Einsatzort.k){
var dest_url = {origin:Standort, destination:Einsatzort, travelMode:google.maps.DirectionsTravelMode.DRIVING};
direction_service.route(dest_url, function(response, status){
if (status == google.maps.DirectionsStatus.OK){
RouteZumEinsatzort.setDirections(response);
}});
var dest_url_Ziel = {origin:Standort, destination:Einsatzort, travelMode:google.maps.DirectionsTravelMode.DRIVING};
direction_service.route(dest_url_Ziel, function(response, status){
if (status == google.maps.DirectionsStatus.OK){
RouteZumEinsatzortZiel.setOptions({ preserveViewport: true });
RouteZumEinsatzortZiel.setDirections(response);
}});
var marker = new google.maps.Marker({ position: Einsatzort, title: "Einsatzort", map: KarteZiel});
KarteZiel.setCenter(Einsatzort);
KarteZiel.setZoom(ZoomEinsatzort);
}
else
{
var marker = new google.maps.Marker({ position: Standort, title: "Standort", map: KarteRoute});
KarteRoute.setZoom(ZoomStartPosition);
KarteRoute.setCenter(Standort);
var marker = new google.maps.Marker({ position: Standort, title: "Standort", map: KarteZiel});
KarteZiel.setZoom(ZoomStartPosition);
KarteZiel.setCenter(Standort);
}
}
var rendererOptions = {draggable: true};
var RouteZumEinsatzort = new google.maps.DirectionsRenderer(rendererOptions);
var RouteZumEinsatzortZiel = new google.maps.DirectionsRenderer(rendererOptions);
var direction_service = new google.maps.DirectionsService();
var KarteRoute;
var KarteZiel;
var geocoder = new google.maps.Geocoder();
var Standort = new google.maps.LatLng(1.23456, 1.23456);//Hier die Start Addresse in Geo-Koordinaten eingeben (die gleiche wie im BosMon)
var Einsatzort = new google.maps.LatLng(%gps_latitude%, %gps_longitude%);
var ZoomStartPosition = 15;
var ZoomEinsatzort = 17;
document.getElementById('KarteRoute').style.width = '800px';
document.getElementById('KarteRoute').style.height = '800px';
document.getElementById('KarteZiel').style.width = '800px';
document.getElementById('KarteZiel').style.height = '800px';
initialize();
showRoute();
</script>
</body>
</html>
Marco hat geschrieben:Hallo,
zum anzeigen von Routen muss eine neue HTML Seite erzeugt werden. Dazu benutzt ihr am einfachsten den Editor (Windows eigener Text Editor).
Im Editor folgenden Text einfügen:
<html>
<body>
<div id="wrapper">
<div id="map_canvas"></div>
<div id="map_canvas_ziel"></div>
<div id="map_direction"></div>
<!-- STARTING MAP DEFINITION -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sens ... "></script>
<script type="text/javascript">
var rendererOptions = {draggable: true};
var map_direction = new google.maps.DirectionsRenderer(rendererOptions);
var direction_service = new google.maps.DirectionsService();
var map;
var map_Ziel;
var start = new google.maps.LatLng(0.0, 0.0);
var geocoder;
geocoder = new google.maps.Geocoder();
// Initalize your map
function initialize()
{
var myOptions = {zoom:zoom, mapTypeId: google.maps.MapTypeId.ROADMAP, center: start};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map_direction.setMap(map);
map_direction.setPanel(document.getElementById("map_direction"));
}
function showRoute()
{
var start = "Hier die Start Adresse eingeben!"
var dest_url = {origin:start, destination:destination, travelMode:google.maps.DirectionsTravelMode.DRIVING};
direction_service.route(dest_url, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
map_direction.setDirections(response);
}
}
);
}
</script>
<script>
var zoom = 10; // map zoom
var destination = new google.maps.LatLng(%gps_latitude%, %gps_longitude%);// destination, your address
document.getElementById('map_canvas').style.width = '800px'; // map width
document.getElementById('map_canvas').style.height = '800px'; // map height
initialize();
showRoute();
</script>
</div>
</body>
</html>
Den Text "Hier die Start Adresse eingeben!" natürlich mit eurer Adresse ersetzten. Die Anführungszeichen müssen drin bleiben.
Die Datei in den BosMon Ordner \BosMon\mapTemplates speichern. Die Dateiendung muss .html sein!
Evtl. BosMon neu starten.
Die neue Karte kann man jetzt im Kartenfenster auswählen.
Gruß Marco