|
Registriert seit: 21. Mär 2006
12 Beiträge
|
AW: Google Maps API mit lokalen Bildern?
21. Mai 2012, 21:40
Hallo Thom,
ich arbeite mit der TWebBrowser Komponente. Über eine Konstante lade ich das Java-Script für die Maps. Bei "function PutMarkerBlue" und "function PutMarker" werden die Marker als Image definiert. Den Großteil dieser Einbindung hatte ich aus einem Tutorial, könnte also dem Ein oder Anderen bekannt vorkommen  :
Delphi-Quellcode:
const
HTMLStr: AnsiString =
' <html> '+
' <head> '+
' <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> '+
' <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> '+
' <script type="text/javascript"> '+
' '+
' '+
' var geocoder; '+
' var map; '+
' var trafficLayer;'+
' var bikeLayer;'+
' var markersArray = [];'+
' '+
' '+
' function initialize() { '+
' geocoder = new google.maps.Geocoder();'+
' var latlng = new google.maps.LatLng(49.067231,10.837039); '+
' var myOptions = { '+
' zoom: 12, '+
' center: latlng, '+
' mapTypeId: google.maps.MapTypeId.HYBRID'+
' }; '+
' map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); '+
' trafficLayer = new google.maps.TrafficLayer();'+
' bikeLayer = new google.maps.BicyclingLayer();'+
' map.set("streetViewControl", false);'+
' } '+
' '+
' '+
' function codeAddress(address) { '+
' if (geocoder) {'+
' geocoder.geocode( { address: address}, function(results, status) { '+
' if (status == google.maps.GeocoderStatus.OK) {'+
' map.setCenter(results[0].geometry.location);'+
' PutMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng(), results[0].geometry.location.lat()+","+results[0].geometry.location.lng());'+
' } else {'+
' alert("Geocode was not successful for the following reason: " + status);'+
' }'+
' });'+
' }'+
' }'+
' '+
' '+
' function codeAddressBlue(address) { '+
' if (geocoder) {'+
' geocoder.geocode( { address: address}, function(results, status) { '+
' if (status == google.maps.GeocoderStatus.OK) {'+
' map.setCenter(results[0].geometry.location);'+
' PutMarkerBlue(results[0].geometry.location.lat(), results[0].geometry.location.lng(), results[0].geometry.location.lat()+","+results[0].geometry.location.lng());'+
' } else {'+
' alert("Geocode was not successful for the following reason: " + status);'+
' }'+
' });'+
' }'+
' }'+
' '+
' '+
' function GotoLatLng(Lat, Lang) { '+
' var latlng = new google.maps.LatLng(Lat,Lang);'+
' map.setCenter(latlng);'+
' PutMarker(Lat, Lang, Lat+","+Lang);'+
' }'+
' '+
' '+
' function ClearMarkers() { '+
' if (markersArray) { '+
' for (i in markersArray) { '+
' markersArray[i].setMap(null); '+
' } '+
' } '+
' } '+
' '+
' function PutMarkerBlue(Lat, Lang, Msg) { '+
' var latlng = new google.maps.LatLng(Lat,Lang);'+
' var image = "http://www.domain.de/images/blue-pushpin.png";'+ //
' var marker = new google.maps.Marker({'+
' position: latlng, '+
' map: map,'+
' icon: image,'+ //
' title: "Alarmierte Wehr"'+
' });'+
' markersArray.push(marker); '+
' }'+
' '+
' function PutMarker(Lat, Lang, Msg) { '+
' var latlng = new google.maps.LatLng(Lat,Lang);'+
' var image = "http://www.domain.de/images/firedept.png";'+ //
' var marker = new google.maps.Marker({'+
' position: latlng, '+
' map: map,'+
' icon: image,'+ //
' title: "Einsatzort"'+
' });'+
' markersArray.push(marker); '+
' }'+
' '+
' '+
' function TrafficOn() { trafficLayer.setMap(map); }'+
' '+
' function TrafficOff() { trafficLayer.setMap(null); }'+
' '+' '+
' function BicyclingOn() { bikeLayer.setMap(map); }'+
' '+
' function BicyclingOff(){ bikeLayer.setMap(null);}'+
' '+
' function StreetViewOn() { map.set("streetViewControl", true); }'+
' '+
' function StreetViewOff() { map.set("streetViewControl", false); }'+
' '+
' '+' </script> '+
' </head> '+
' <body onload="initialize()"> '+
' <div id="map_canvas" style="width:100%; height:100%"></div> '+
' </body> '+
' </html> ';
FormCreate läd dann entsprechend die ersten Daten. Über einen Startparameter wird ein Ortsname übertragen und dann in der Karte gesucht:
Delphi-Quellcode:
procedure TfrmMain.FormCreate(Sender: TObject);
var
aStream : TMemoryStream;
adr : string;
begin
WebBrowser1.Navigate('about:blank');
if Assigned(WebBrowser1.Document) then
begin
aStream := TMemoryStream.Create;
try
aStream.WriteBuffer(Pointer(HTMLStr)^, Length(HTMLStr));
//aStream.Write(HTMLStr[1], Length(HTMLStr));
aStream.Seek(0, soFromBeginning);
(WebBrowser1.Document as IPersistStreamInit).Load(TStreamAdapter.Create(aStream));
finally
aStream.Free;
end;
HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;
end;
adresse := ParamStr(1);
if adresse <> '' then
begin
Edit1.Text := adresse;
adr := adresse;
adr := StringReplace(StringReplace(Trim(adr), #13, ' ', [rfReplaceAll]), #10, ' ', [rfReplaceAll]);
HTMLWindow2.execScript(Format('codeAddress(%s)',[QuotedStr(adr)]), 'JavaScript');
end;
end;
Über welchen Weg kann ich nun die zwei Bilder lokal speichern oder in die Anwendung einbinden um sie in der Karte zu nutzen? Ich hatte es schon als Ressource eingebunden, jedoch blieb ich beim Einbinden hängen.
Gruß
Andy
|