Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dynamiczne przesyłanie zmiennej
Forum PHP.pl > Forum > Przedszkole
maksik
Witam

Kod dla mapy google pozwala dynamicznie wyświetlać dane LAT,LONG w polach input po przesunięciu markera, jak można uzyskać ten efekt sam efekt w odwrotną stronę? tj. po wpisaniu w input danych LAT,LONG by dynamicznie marker się do nich dostosował?

  1. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  2. <script type="text/javascript">
  3.  
  4. (function($) {
  5. $(window).load(function() {
  6.  
  7. var latitude = parseFloat($(\'#ItemMapLatitude\').val()),
  8. longitude = parseFloat($(\'#ItemMapLongitude\').val()),
  9. zoom = parseInt($(\'#ItemMapZoom\').val()),
  10. setMarkerPosition = function(latitude, longitude) {
  11. $(\'#ItemMapLatitude\').val(latitude);
  12. $(\'#ItemMapLongitude\').val(longitude);
  13. },
  14. setZoom = function(z) {
  15. $(\'#ItemMapZoom\').val(z);
  16. };
  17.  
  18. var options = {
  19. zoom: zoom,
  20. center: new google.maps.LatLng(latitude, longitude),
  21. mapTypeId: google.maps.MapTypeId.ROADMAP,
  22. mapTypeControl: true,
  23. navigationControl: true,
  24. disableDefaultUI: true
  25. };
  26.  
  27. var map = new google.maps.Map(document.getElementById(\'addMap\'), options);
  28.  
  29. var marker = new google.maps.Marker({
  30. position: new google.maps.LatLng(latitude, longitude),
  31. map: map,
  32. draggable: true,
  33. title: \'\'
  34. });
  35.  
  36.  
  37. google.maps.event.addListener(marker, \'mouseup\', function() {
  38. setMarkerPosition(marker.getPosition().lat(), marker.getPosition().lng());
  39. });
  40.  
  41. google.maps.event.addListener(map, \'zoom_changed\', function() {
  42. setZoom(map.getZoom());
  43. });
  44.  
  45.  
  46.  
  47. });
  48. })(jQuery);
  49. </script>
  50.  
  51. <input type="text" name="lat" step="any" type="number" value="51.98" id="ItemMapLatitude" />
  52. <input type="text" name="long" step="any" type="number" value="19.31" id="ItemMapLongitude" />
Daimos
skoro korzystasz z jquery, to dajesz na inputa change i możesz skorzystać z tej funkcji:
  1. marker.setPosition()


czyli np.
  1. $('#ItemMapLatitude').change(function(){
  2. // podmiana pozycji markera
  3. });
maksik
czy mógłbyś jeszcze raz wskazać te funkcje na tym przykładzie?
http://jsfiddle.net/X5r8r/2184/
Turson
http://jsfiddle.net/X5r8r/2186/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.