Hej, jakiego rozwiązania mogę użyć jeśli chce na mojej stronie osadzić mapę i pobierać długość i szerokość geograficzną która jest generowana poprzez kliknięcie na mapie przez usera ? Oczywiście jeśli chodzi o mapę to będę chciał użyć jakiegoś gotowego komponentu google, bing czy czegoś podobnego. Potem w planie mam wysłanie tych danych do mojego backendui w Springu. Normalnie pracuje jako backend developer i niestety z frontendem nie mam wiele do czynienia, jakieś tam podstawy ale był bym wdzięczny za podpowiedz jak się do tego tematu zabrać.
Pozdrawiam
- Rejestracja:około 8 lat
- Ostatnio:ponad 3 lata
- Postów:13
0
- Rejestracja:prawie 8 lat
- Ostatnio:około godziny
- Lokalizacja:Polska
- Postów:1596
- Rejestracja:około 8 lat
- Ostatnio:ponad 3 lata
- Postów:13
0
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(33.397, -81.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions
);
google.maps.event.addListener(map, 'click', function(event) {
document.getElementById('latMap').value = event.latLng.lat();
document.getElementById('lngMap').value = event.latLng.lng();
});
}
function mapDivClicked (event) {
var target = document.getElementById('map_canvas'),
posx = event.pageX - target.offsetLeft,
posy = event.pageY - target.offsetTop,
bounds = map.getBounds(),
neLatlng = bounds.getNorthEast(),
swLatlng = bounds.getSouthWest(),
startLat = neLatlng.lat(),
endLng = neLatlng.lng(),
endLat = swLatlng.lat(),
startLng = swLatlng.lng();
document.getElementById('posX').value = posx;
document.getElementById('posY').value = posy;
document.getElementById('lat').value = startLat + ((posy/350) * (endLat - startLat));
document.getElementById('lng').value = startLng + ((posx/500) * (endLng - startLng));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" onclick="mapDivClicked(event);" style="height: 350px; width: 500px;"></div>
x: <input id="posX" />
y: <input id="posY" />
lat: <input id="lat" />
lng: <input id="lng" />
<div />
lat from map: <input id="latMap" />
lng from map: <input id="lngMap" />
</body>
</html>
@bakunet dzieki za pomoc nie znalazłem tam rozwiązania ale poszedłem tym tropem wi wygrzebałem taki kod prosty HTML z osadzoną mapa możliwością zaczytania z niej lat / lon