Cześć,
Chcę zrobić aplikację pod Delphi do pokazania naszych przejazdów rowerowych (jeździmy z kumplami) na mapie w formie zbioru punktów GPS.
Próbowałem najpierw pokazać samą mapkę na Form-ie (WebBrowser1.Navigate('')), z Openstreetmap wyświetla OK, ale z GoogleMaps są problemy.
W takim przypadku chyba pozostanę przy Openstreetmap, ale nie wiem jak wyświetlić ścieżki lokalnie i móc szybko kasować i przedstawiać inne ścieżki.
Jak to zrobić pod Delphi?
Pozdrawiam.
Na czym polega problem wyświetlenia mapy google?
Ja nie mam z tym kłopotu tylko, że w sekcji head mam:
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
Dalej do samej strony możesz się odwoływać z Delphi i wywoływać nawet funkcje javaScript.
nie wiem jak w delphi rozbudowane są libki do map ale jak możesz wyświetlić html'a to obczaj sobie Leafleta to taka kobyła do map i nie tylko.
Prawdę mówiąc, to nie mam doświadczenia w obsłudze stron internetowych.
Dotychczas Webbrowser wykorzystywałem tylko do wpisywania adresów: WebBrowser1.Navigate('https://www.openstreetmap.org/#map=xxxx/yyyy') ;
Chwilowo do testów będę wrzucł gotowy plik do Webbrowser-a. Tylko jaki kod powinien być pliku?
Od @katakrowa już znam jedną linijkę, ale nie potrafię stworzyć poprawnego kodu w pliku html.
Chwilowo do testów będę wrzucł gotowy plik do Webbrowser-a. Tylko jaki kod powinien być pliku?
Niby ok ale i tak musisz jeszcze umieć obsłużyć API od GoogleMaps, które generalnie najlepiej obsługiwać z JavaScript.
W Openstreetmap nie byłoby prostsze wyświetlanie mapy i wrzucanie punktów trasy? (tylko pytam)
Tu masz przykład https://rubenspgcavalcante.github.io/leaflet-ant-path/
@Schadoow, patrze na ten kod z linku i nie widzę wprowadzania punktów GPS. Czy tam są dane ukryte i jak do powiązać z Delphim?
@Kris Mru: Jak masz problem z wyszukiwaniem informacji nawet na stronie to chyba sobie możesz odpuścić bo copy paste może cię przerosonąć....
Na stronie jest strona Example. Wchodzisz na nią są tam przykłady na stackblitzu
o np taki -> https://codepen.io/rubenspgcavalcante/pen/BYdgXR
Tam w JS widać skąd pobierane dane:
Wchodzisz na tego stackblitza z danymi:
https://codepen.io/rubenspgcavalcante/pen/MvdpeV
Widać, że to jest export z google maps:
Natomiast na punktach x,y tez da sie zrobić.
Na githubie jest wiecej przykładów. https://github.com/rubenspgcavalcante/leaflet-ant-path
Zależy co chcesz powiązać ładowanie danych, komunikacje dwu stronną ?
jak chcesz x,y
let arrs = [
[44.0567000, 12.5552968],
[44.056880, 12.555297],
[44.056955,12.553081],
[44.057004, 12.551313],
[44.057039, 12.551160],
[44.056712, 12.547406],
[44.056737, 12.547216],
[44.0567000, 12.5460868]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs, {
"paused": false,
"reverse": false,
"delay": 3000,
"dashArray": [10, 20],
"weight": 5,
"opacity": 0.5,
"color": "#0000FF",
"pulseColor": "#FFFFFF"
});
path.addTo(map);
To widziałem, tylko nie znam javy i jak to powiązać z Delphi? Można zrobić obsługę mapy ale bez javy?
@Kris Mru: To nie jest java.... Więc jej znajoność by ci nic nie dała.
Po wpisaniu How do I open a local file in TWebBrowser dostałem sporo odpowiedzi.
Tak samo po wpisaniu TWebBrowser communication np taki artykuł https://github.com/delphidabbler/articles/blob/master/article-21.pdf
@Schadoow, jakbyś dokładniej przeczytał moje posty z poprzedniej strony tego tematu, to byś zauważył że cały czas wgrywam pliki do TWebBrowser-a. Więc nie rozumiem powyższego postu. Pytałem, co dokładnie powinno być zapisane w tym pliku?
Jak widać da się choć trzeba odrobinkę poczytać:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Polylines</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
flightPath.setMap(map);
}
</script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=ZORGANIZUJ_SOBIE_WLASNY_KLUCZ&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
Wszystko już działa. Jedynie mam problem z odczytem pliku z Memo do do WebBrowser przez WebBrowser1.OleObject. Pojawia się błąd skryptu "Oczekiwano znaku ';'" (w wierszu 3), wygląda jakby coś Memo poprzestawiał i następuje błędne przepisanie.
W Memo mam zapisane przed kompilacją liniki kodu podobne do pokazanych w powyższym poście.
Kris Mru napisał(a):
Wszystko już działa. Jedynie mam problem z odczytem pliku z Memo do do WebBrowser przez WebBrowser1.OleObject. Pojawia się błąd skryptu "Oczekiwano znaku ';'" (w wierszu 3), wygląda jakby coś Memo poprzestawiał i następuje błędne przepisanie.
Nie sądzę. Pewnie masz błędny kod w tym memo. Pokaż kod bez tego to możesz sobie opisywać problem godzinami a i tak się nikt nie domyśli o co Ci chodzi.
Kod do obsługi:
WebBrowser1.Navigate('about:blank');
WebBrowser1.OleObject.document.write(Memo1.Text);
Jak pisałem w Memo1 mam na stałe zapisany kod html, który działa jeśli kod html pobieram z pliku do WebBrowser1.
Czy kod z poprzedniego postu obsługujący WebBrowser jest poprawny?