如何使用谷歌地图动态创建多个地图

时间:2018-06-28 10:49:10

标签: javascript angular google-maps google-maps-api-3 angular5

我正在使用以下软件包https://www.npmjs.com/package/@ngui/map 用于创建多人游乐设施的街景偏执狂。 这是单次骑行和单张地图的理想盟友,但我无法使用ngFor创建多张地图。

以下代码始终返回未定义:-

simulator-test-rides.component.ts

initMap() {
    console.log("This.directionsRendererDirective:",this.directionsRendererDirective);
    this.directionsRendererDirective['initialized$'].subscribe(directionsRenderer => {
        this.directionsRenderer = directionsRenderer;
    });
    this.directionService = new google.maps.DirectionsService();
  }

控制台错误-错误TypeError:无法读取未定义的属性'initialized $'

simulator-test-rides.component.html:-

 <tbody *ngFor="let trip of trips; let i = index" >
    <ng-template [ngIf]="trip.service_type !=='imride'">
        <tr>
            <th >{{i+1}}</th>
            <td>{{trip.driver_details.address.full}}</td>
            <td>{{trip.partner_details.address.full}}</td>
        </tr>
        <div class="row">
            <div id="my-map" class="col-md-6">
                <ngui-map 
                zoom="18" 
                tilt="45"
                center="direction.origin" 
                (mapReady$)="onMapReady($event)"   
                streetView="StreetViewPanorama(document.querySelector('div#streetview'),{position:new google.maps.LatLng(37.51317,-121.952594)})">>
                    <directions-renderer  
                        [draggable]="true" 
                        panel="#my-panel" 
                        (directions_changed)="directionsChanged()"
                        [directions-request]="direction">
                    </directions-renderer>
                </ngui-map>
            </div>
            <div #streemview class="streetview-container col-md-6" id="streetview"></div>
        </div>
        <div id="my-panel" class="row col-md-12 ml-2 mt-1 mr-2">

        </div>
    </ng-template>
</tbody>

0 个答案:

没有答案