调整谷歌地图的大小不起作用，需要很长时间

Question

起初，我的问题是带有方向服务的谷歌地图无法正确加载。经过一些研究，我发现google.maps.event.trigger(map, 'resize').好的，现在它可以工作了。有点。

我的应用程序的顺序是：页面 x，页面 A 包含地图和方向，页面 y，页面 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);
        }
      });
    }

所以，现在会发生什么：页面 A 首先加载地图（正确且没有方向），然后在几秒钟 （5 - 8） 后发生"调整大小"并显示方向。然后它转到页面 y，单击按钮后它转到页面 B，地图仅出现在左上角。几秒钟后，再次发生"调整大小"并显示方向。当我再次执行此例程（返回第 X 页）时，第一张地图也会加载到左上角，并且会发生所有这些事情。

我有两个问题。

1. 当页面加载时，我想显示已经带有方向的地图。
2. 如果不可能，好吧，但至少它应该正确加载地图。而且这种调整大小应该工作得更快。

我

不确定我是否将"调整大小"代码放在正确的位置。有什么想法吗？

Answer 1

你调用两个函数，这些函数将在navigator.geolocation.getCurrentPosition的成功回调中绘制路线（rotaInicial & rotaIFinal）。 getCurrentPosition将异步执行，可能需要一些时间才能获得结果。

因此，只要您需要根据用户位置设置方向，就无法加快方向的绘制速度。