изменить размеры карт google не работает и занимает много времени

Question

Во-первых, моя проблема заключалась в том, что карты google с сервисом направления не загружались правильно. После некоторых исследований я нахожу google.maps.event.trigger(map, 'resize'). Хорошо, теперь это работает. Вроде.

Порядок моего приложения является: страница х, страница А с картой и направлением, страница у, страница B с картой и направлением.

Мой сценарий:

function initialize(mapa_id) { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var mapOptions = { 
     zoom: 17, 
     mapTypeControl: false, 
     zoomControl: false, 
     draggable: false, 
     center: new google.maps.LatLng(-23.583693,-48.042186), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById(mapa_id), mapOptions); 
     google.maps.event.trigger(map, 'resize');   
      directionsDisplay.setMap(map); 
      if(mapa_id == 'map-canvas'){ 
       navigator.geolocation.getCurrentPosition(rotaInicial, onError, options); 
      }else{ 
       directionsDisplay.setMap(map); 
       navigator.geolocation.getCurrentPosition(rotaFinal, onError, options); 
      } 
    } 

function rotaInicial(position) { 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    var start = new google.maps.LatLng(latitude,longitude); 
    var end = new google.maps.LatLng(-23.578659,-48.038045); 

     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      google.maps.event.trigger(map, 'resize'); 
      directionsDisplay.setDirections(response); 
     } 
     }); 
    } 

function rotaFinal() { 
    var start = new google.maps.LatLng(-23.578659,-48.038045); 
    var end = new google.maps.LatLng(-23.585503,-48.038324); 

    var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      google.maps.event.trigger(map, 'resize'); 
      directionsDisplay.setDirections(response); 
     } 
     }); 
    } 

Итак, что происходит сейчас: страница загружает карту первого (правильно и без каких-либо направлений), а затем через несколько секунд (5 - 8) изменения размера в ' происходит, и он показывает направления. Затем он переходит на страницу y, после нажатия кнопки он переходит на страницу B, а карта отображается только в левом верхнем углу. Через несколько секунд происходит «изменение размера» и показано направление. когда я снова выполняю эту процедуру (назад к странице x), первая карта загружается также в верхнем левом углу, и это происходит во всех этих вещах.

У меня есть две проблемы.

1. Когда страница загружается, я хочу показать карту уже с указанием направления.
2. Если это невозможно, но, по крайней мере, он должен правильно загрузить карту. И этот размер должен работать быстрее.

Я не уверен, поставил ли я код «изменить размер» в нужном месте. Есть идеи?

Answer 1

Вы вызываете обе функции, которые будут нарисовать маршрут (rotaInicial & rotaIFinal) в обратном вызове navigator.geolocation.getCurrentPosition. getCurrentPosition будет выполняться асинхронно, и это может занять некоторое время, пока вы не получите результат.

Таким образом, до тех пор, как вам нужно, чтобы задать направление, основываясь на местоположении пользователей, есть не все, что вы можете сделать, чтобы ускорить рисование направлений.