Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Google maps v3 i zoom przy wyznaczaniu trasy.
muwie
post
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 1
Dołączył: 21.02.2007
Skąd: Milejów

Ostrzeżenie: (0%)
-----

Witam,
Mam problem. Otóż chce ustalić na sztywno zoom przy wyznaczaniu trasy w google maps. Poniżej przedstawiam wam kod
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
  7.     <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
  8.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  9.     <script>
  10.       var directionDisplay;
  11.       var directionsService = new google.maps.DirectionsService();
  12.       var map;
  13.  
  14.       function initialize() {
  15.         directionsDisplay = new google.maps.DirectionsRenderer();
  16.         var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  17.         var mapOptions = {
  18.           zoom:13,
  19.           mapTypeId: google.maps.MapTypeId.ROADMAP,
  20.           center: chicago,
  21.  
  22.         }
  23.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  24.         directionsDisplay.setMap(map);
  25.       }
  26.  
  27.       function calcRoute() {
  28.  
  29.  
  30.         var start = document.getElementById('skad').value;
  31.         var end = document.getElementById('dokad').value;
  32.         var request = {
  33.             origin:start,
  34.             destination:end,
  35.             travelMode: google.maps.DirectionsTravelMode.DRIVING
  36.         };
  37.         directionsService.route(request, function(response, status) {
  38.           if (status == google.maps.DirectionsStatus.OK) {
  39. 		//directionsDisplay.setOptions({  });
  40.  
  41.             directionsDisplay.setDirections(response);
  42.           }
  43.         });
  44.       }
  45.     </script>
  46. <style>
  47. html, body {
  48.   height: 100%;
  49.   margin: 0;
  50.   padding: 0;
  51. }
  52.  
  53. #map_canvas {
  54.   height: 100%;
  55. }
  56.  
  57. @media print {
  58.   html, body {
  59.     height: auto;
  60.   }
  61.  
  62.   #map_canvas {
  63.     height: 650px;
  64.   }
  65. }
  66.  
  67. </style>
  68.   </head>
  69.   <body onload="initialize()">
  70.     <div>
  71.     <b>Start: </b>
  72.     <input id="skad">
  73.  
  74.     <b>End: </b>
  75.     <input id="dokad" >
  76.     <input type="button" value="Pokaż" onclick="calcRoute();">
  77.     </div>
  78.     <div id="map_canvas" style="top:30px;"></div>
  79.   </body>
  80. </html>
  81.  
[HTML] pobierz, plaintext

Teraz zoom dobiera się optymalnie, a chciałbym zmniejszyć zoom
Go to the top of the page
+Quote Post
sowiq
post
Post #2





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[JAVASCRIPT] pobierz, plaintext 
  1. if (status == google.maps.DirectionsStatus.OK) {
  2.     //directionsDisplay.setOptions({ });
  3.     directionsDisplay.setDirections(response);
  4.  
  5.     map.zetZoom(5);    // <-- ustawiasz niższy zoom
  6. }
[JAVASCRIPT] pobierz, plaintext


Pewien na 100% nie jestem, ale wydaje mi się, że setDirections wykonuje się synchronicznie i w ten sposób powinno być dobrze.

Ten post edytował sowiq 12.03.2013, 09:56:41
Go to the top of the page
+Quote Post
muwie
post
Post #3





Grupa: Zarejestrowani
Postów: 30
Pomógł: 1
Dołączył: 21.02.2007
Skąd: Milejów

Ostrzeżenie: (0%)
-----

Dzięki za odpowiedź, ale to nie pomogło
Go to the top of the page
+Quote Post
lukasz1985
post
Post #4





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----

Możesz wyłączyć zoom na kólku myszy i na sliderze. W tym celu dodaj do mapOptions dwie właściwości:
[JAVASCRIPT] pobierz, plaintext 
  1.   scaleControl: false, // wyłącza kontrolę zoomu na sliderze
  2.   scrollwheel: false // wyłącza kontrole zoomu na kółku mysy
[JAVASCRIPT] pobierz, plaintext


Ten post edytował lukasz1985 12.03.2013, 13:51:51
Go to the top of the page
+Quote Post
sowiq
post
Post #5





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Zerknij na to https://developers.google.com/maps/document...RendererOptions :

Cytat
preserveViewport (boolean)
By default, the input map is centered and zoomed to the bounding box of this set of directions. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.


[edit]
Ewentualnie spróbuj tego:
[JAVASCRIPT] pobierz, plaintext 
  1. google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  2.     map.setZoom(5);
  3. });
[JAVASCRIPT] pobierz, plaintext


Ten post edytował sowiq 12.03.2013, 13:55:33
Go to the top of the page
+Quote Post
muwie
post
Post #6





Grupa: Zarejestrowani
Postów: 30
Pomógł: 1
Dołączył: 21.02.2007
Skąd: Milejów

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. directionsDisplay.setOptions({ preserveViewport: true });
[HTML] pobierz, plaintext

Ten kod działa, ale mam pewień problem ponieważ wyznacza mi się trasa ale mapa się nie przesuwa nad trasę

Ten post edytował muwie 13.03.2013, 08:58:03
Go to the top of the page
+Quote Post
sowiq
post
Post #7





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

@muwie, zgadza się, zgodnie z dokumentacją. Sprawdziłem i faktycznie event wywołuje się jeszcze przed dostosowaniem zooma. Spróbuj takiego obejścia (inne nie przychodzi mi do głowy, bo ta funkcjonalność trochę uboga jest :/):
[JAVASCRIPT] pobierz, plaintext 
  1. // po:
  2. directionsDisplay.setMap(map);
  3. // daj to:
  4. var directionsZoom = 5;
  5. google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  6.     setTimeout( function(){ map.setZoom(directionsZoom) }, 50 );
  7. });
[JAVASCRIPT] pobierz, plaintext

Go to the top of the page
+Quote Post
muwie
post
Post #8





Grupa: Zarejestrowani
Postów: 30
Pomógł: 1
Dołączył: 21.02.2007
Skąd: Milejów

Ostrzeżenie: (0%)
-----

Dzięki. Pomogło (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.12.2025 - 18:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn