Seite 2 von 5

Re: Route anzeigen

Verfasst: 22. Feb 2014, 21:31
von searchandrescue2
Hallo wer kann mir weiterhelfen mit dem Problemm route anzeigen

Re: Route anzeigen

Verfasst: 20. Mär 2014, 22:41
von Marco
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

Re: Route anzeigen

Verfasst: 26. Mär 2014, 11:41
von nachrichtenbaum
Hallo, das Routing funktioniert bei mir einwandfrei.
Problem ist die Startposition! Hier ist der Zoom zu Groß.
Wo kann ich hier den Zoom anders einstellen?


mfg Ralf

Re: Route anzeigen

Verfasst: 1. Apr 2014, 22:46
von Marco
Hallo Ralf,
ich hab noch eine zweite Karte eingefügt. Ansonsten sollte sich bei dieser Seite der Zoom überall einstellen lassen. Siehe ZoomStartPosition und ZoomEinsatzort.

Gruß Marco

<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?sens ... "></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"));
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});
map.setZoom(ZoomStartPosition);
map.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>

</div>
</body>
</html>

Re: Route anzeigen

Verfasst: 2. Apr 2014, 10:36
von nachrichtenbaum
Hallo, wenn ich es richtig verstanden habe sollen sich jetzt zwei Karten untereinender aufbauen!

Die Oberste Karte baut sich nicht auf ! Feld ist grau und leer
Die untere Karte baut sich auf mit Standort bzw Zielkoordinate als Satellitenbild!

kann aber den Fehler nicht finden.

Gruß R.Baum

Re: Route anzeigen

Verfasst: 2. Apr 2014, 22:31
von Marco
hi,
versuchs nochmal. Da waren wohl ein paar Flüchtigkeitsfehler drin.

Gruß Marco

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>

Re: Route anzeigen

Verfasst: 2. Apr 2014, 23:41
von nachrichtenbaum
Funktioniert jetzt , Danke für die schnelle Reaktion!

Frage : Ist es angedacht das Fahrzeuge bzw.Wachen auf der Karte angezeigt werden können und die Fahrzeuge mit Status zu sehen sind?

Re: Route anzeigen

Verfasst: 12. Aug 2015, 22:59
von Martin
Hallo,
ist es möglich die zieladresse als text (also keine gps daten) von Alamos übergeben zulassen!
und dann mit bosmon die route zu berechnen?
vielen dank
martin

Re: Route anzeigen

Verfasst: 18. Dez 2016, 18:13
von maxdre.redcross
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


Sollen bei "Hier die Start Adresse eingeben" Geokoordinaten eingegeben werden, oder die jeweilige maps URL, oder einfach die Adresse mit Ort wie man sie auch bei maps in der suche eingeben würde, eingetragen werden?

Gruß Max

Re: Route anzeigen

Verfasst: 18. Dez 2016, 18:38
von maxdre.redcross
1) Muss ich noch den API- KEy in die HTML Datei einfügen, oder klappt das auch ohne? ( würde nach meinem Verständnis nur Sinn machen, damit die Karte überhaupt angezeigt wird)

2) Mir wird, wenn ich die erstellte Karte bei BosMon auswähle, ein Java Script Fehler angezeigt. in Zeile 42 (Syntaxfehler). Wie bekome ich das zum laufen?
3) Weiß einfach nicht, wie die einzufügende Adresse bei:" Hier eigene Adresse einfügen", auszusehen
hat. Hab schon Geokoordinaten, ostadresse, URL, und HTML Code der Adresse auf Google Maps eingefügt und nichts funktioniert, da das KArten- Fenster weiß ist und mir Script- Fehler angezeigt werden.

Vielleicht meldet sich hier drauf noch jemand...

Gruß Max