Angular和Google Maps渲染效果

时间:2017-05-24 10:27:17

标签: angular google-maps

我正在使用Node,Angular2和谷歌地图进行实时应用。我正在使用谷歌地图API js本身包含在index.html ...<script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>...

当我在回调中使用API​​的DirectionsService时,我会在地图中渲染一个列表并绘制de route结果。但是,列表会在3或4秒后显示。

this.avisosService.getAvisos().subscribe(
  aviso => {
    this.avisos = aviso;
    this.directionsService =  new google.maps.DirectionsService();
    this.directionsService.route({
        origin: {lat: aviso.equipo.geometry.coordinates[0], lng: aviso.equipo.geometry.coordinates[1]},
        destination: {lat: aviso.tecnico.geometry.coordinates[0], lng: aviso.tecnico.geometry.coordinates[1]},
        travelMode: 'DRIVING'
      }, (result, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
          this.listItems.unshift('Aviso');
          const directionDisplay = new google.maps.DirectionsRenderer();
          directionDisplay.setMap(maping);
          directionDisplay.setDirections(result);
          directionDisplay.setRouteIndex(aviso.id);
          this.directionsDisplay.push(directionDisplay);
        } else {
          console.log(status);
        }
      });
  }
);

this.listItems.unshift('Aviso');填充listItems变量,该变量传递给绘制列表的另一个组件。

我不明白为什么需要这么长时间才能看到列表中的元素,他们在离开地图上的路线后3-4秒就做了它们应该在同一时间离开

有人能帮助我吗?

谢谢!

0 个答案:

没有答案