directionsService.route () с новым Map и setMap () в перерывах обратного вызова setPanel ()?

Question

Используя API Карт Google V3, я столкнулся с тем, что создание карты для .setMap () приводит к тому, что .setPanel () ничего не делает. Конечная цель - загрузить карту один раз. Если я создаю карту до вызова маршрута, все работает нормально. Но сначала я вижу карту, которая загружается при создании карты, затем обратный вызов .route заставляет карту загрузить второй раз. Я хочу устранить эту первую нагрузку или минимизировать временной разрыв. Вот фрагмент кода, который работает:

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsService.route(parms, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(result);
      directionsDisplay.setPanel(document.getElementById("textlist"));
    }
  });

Вот сломано:

  directionsService.route(parms, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(result);
      directionsDisplay.setPanel(document.getElementById("textlist"));
    }
  });

Answer 1

Все, что вам нужно сделать, это закомментировать строки map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions); и он не будет загружаться в первый раз. Я попробовал то же самое в моем приложении, и у меня это сработало

Answer 2

вам, вероятно, следует прослушать событие загрузки для новой карты, которую вы определили в обратном вызове для directionsService.route (). Я думаю, что вы не можете рендерить маршруты, пока карта не загружена. Таким образом, новый код будет выглядеть так:

directionsService.route (parms, функция (результат, статус) { if (status == google.maps.DirectionsStatus.OK) { map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

  google.maps.event.addListener(map,'tilesloaded',function(){
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(result);
      directionsDisplay.setPanel(document.getElementById("textlist"));
  }
};

});