Schluss mit den öden faden Anfahrtsplänen! Mit Virtual Earth lassen sich auch ansprechende Anfahrtspläne mit integrierter Routenplanung erstellen. Dieses Codebeispiel können Sie direkt in Ihre Webseite integrieren auch wenn diese auf PHP, Java,... etc läuft.
Laden Sie den Samplecode (Microsoft Public License (Ms-PL)) hier herunter
Abb) Der Routenplanner in Aktion, sogar mit 3D Ansicht.
Features:
- Anzeige Ihrer Firma oder Ihres Restaurants mit Pop-Up Window und Detailinfos
- Routenplanung
- Dynamische Karte die bei der Auswahl der Streckenstops diese auch auf der Karte zentriert.
Wenn Sie die Zip-Datei heruntergeladen haben finden Sie darin folgende Komponenten:
- PushPin.jpg
- ShopFinder.css
- ShopFinder.htm
- ShopFinder.js
ShopFinder.htm: Damit Sie Virtual Earth verwenden können, müssen Sie die Scriptlibrary von Virtual Earth referenzieren:
<!-- Include Virtual Earth Control -->
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1&mkt=de-de></script>
Wichtig sind die Parameter "v", welcher die Version angibt und "mkt", welcher den Marktraum definiert und Ihnen einen deutschen Routenplan ermöglicht (Wichtig: de-at ist nicht unterstützt!). Ferner benötigen wir noch ein DIV-Element in welchem wir das Virtual Earth Control hosten. Danach hängen wir uns in den OnLoad-Event des Body-Elements wo wir mit Hilfe einer Javascript Methode (ShopFinder.js) das Virtual Earth Control initializieren.
<body onload="InitMap();" class="Body" >
<div id='myMap' class="Map"></div>
Das sind alle Elemente die wir für Virtual Earth in der HTML-Seite benötigen. Weiters finden Sie noch das Result-DIV, die Eingabefelder und die Schaltflächen auf der HTML-Seite. Die Schaltflächen "Route ermitteln" und "Karte zentrieren" rufen jeweils entsprechende Methoden in ShopFinder.js auf.
ShopFinder.js: Das Herzstück! Am Anfang dieser Datei werden eine Reihe Variablen definiert welche das Aussehen, die Position, etc. der Location (Shop/Restaurant/Firma) definieren. Die nachfolgenden Variablen müssen Sie daher ggf. für Ihre Bedürfnisse anpassen:
var myShopName = "Microsoft Österreich";
var myShopDescription = "<img src='PushPin.jpg' /><br /><br />Microsoft Österreich<br /><b>Am Euro Platz 3<br/>1120 Wien</b>";
var myShopLocation = new VELatLong(48.170957555552526,16.333430928317938);
var myInitialZoomLevel= 17;
var myShopPushPinImage= "PushPin.jpg";
ShopDescription enthält den HTML-Code der im Pop-Up des Push-Pin's angezeigt wird. Bei myShopLocation müssen Sie die Latitude und Longitude (Geokoordinaten) ihrer Firma,... angeben.
Die Methoden der Javascriptdatei:
InitMap
Diese Methode instanziert zunächst die Javascript-Klasse VEMap und übergibt im Konstruktor den Namen des DIV-Elements in dem Sie Virtual Earth hosten möchten. Mit LoadMap() zeigen Sie nun den gewünschten Kartenausschnitt an:
myMap = new VEMap(control_divMap);
myMap.LoadMap(myShopLocation,myInitialZoomLevel);
Danach fügen wir ein Shape-Element zur Karte hinzu. Ein Shape kann entweder ein PushPin, eine Polyline oder ein Polygon sein. Für uns reicht im Moment ein PushPin also legen wir diesen an:
aShape = new VEShape(VEShapeType.Pushpin,myShopLocation)
aShape.SetAltitudeMode(VEAltitudeMode.RelativeToGround);
aShape.SetCustomIcon(myShopPushPinImage);
aShape.SetDescription(myShopDescription);
myMap.AddShape(aShape);
FocusShop
Diese Methode wird von der Schaltfläche "Karte zentrieren" aufgerufen. Anstatt die Methoden SetCenter und SetZoom hintereinander aufzurufen sollten Sie immer die Methode SetCenterAndZoom aufrufen, da diese Methoden immer asynchron ausgeführt werden und es sonst zu "interessanten" Effekten kommen kann.
FindShop
Wird die Schalftfläche "Route ermitteln" angewählt, wird diese Methode aufgerufen, welche aus den Textboxen die Eingaben des Anwenders ermittelt und danach die Methode "GetRoute" aufruft.
GetRoute
Die Methode "GetDirections" des Map-Controls nimmt 2 Parameter. Im ersten geben Sie ein Array mit den Streckenstationen an (ja, es können mehr als Start und Endpunkt sein) und im Zweiten die Optionen für diese Methode. Mit dem Objekt VERouteOptions beschreiben Sie die Optionen für die Methode "GetDirections"
Hier können Sie die Darstellung der Route konfigurieren und welches Routingservice verwendet werden soll. Für das Routingservice sollten Sie, wenn Sie Mehrsprachigkeit wünschen immer: UseMWS=true angeben (MWS steht für MapPoint WebService). Geben Sie hier false an verwendet Virtual Earth den Routenplanner von Virtual Earth welcher allerdings nur Englisch unterstützt.
Mit RouteCallback geben Sie die Callback-Methode an, die aufgerufen wird, wenn die asynchrone Methode "GetDirections" das Ergebnis liefert.
OnGotRoute(route)
Wenn "GetDirections" die Route vollständig berechnet hat ruft sie diese Methode auf. Die Route wird in Streckenabschnitten unterteilt (RouteLegs) welche wiederum die Routenelemente für den jeweiligen Streckenabschnitt enthält. Wenn Sie nur Start- und End-Punkt angegeben haben bekommen Sie immer nur einen Streckenabschnitt zurückgeliefert. Haben Sie drei Routenpunkte (Start, Mitte, Ende) eingegeben, dann erhalten Sie demnach 2 Streckenabschnitte. Einer vom Start bis zur Mitte und ein Streckenabschnitt Mitte bis Ende.
Diese Methode erstellt daraufhin eine HTML-Liste welche in das Result-DIV eingefügt wird. Die einzelnen Routenelemente werden in einem internen Array gespeichert. Wählt der Benutzer ein Element dieser Liste an, so wird das entsprechende Routenelement ermittelt und die Karte mit der SetCenter-Methode auf dieses Routenelement zentriert.
apollak
