Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Google maps v3 i zoom przy wyznaczaniu trasy.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
muwie
12.03.2013, 08:30:05
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
sowiq
12.03.2013, 09:55:31 
[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.
muwie
12.03.2013, 13:10:29
Dzięki za odpowiedź, ale to nie pomogło
lukasz1985
12.03.2013, 13:51:03
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
sowiq
12.03.2013, 13:51:51
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
muwie
13.03.2013, 08:57:11 
[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ę
sowiq
13.03.2013, 09:20:07
@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

muwie
13.03.2013, 12:57:44
Dzięki. Pomogło smile.gif
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.