You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
3.5 KiB
65 lines
3.5 KiB
<div class="content"> |
|
<div class="map" id="map"></div> |
|
|
|
<!-- 导航路线 --> |
|
<div class="routeGIS"> |
|
<div class="routeHeader"> |
|
<label style="bottom: 8px; left: 38px;" class="routeGISPublicIcon" (click)='clearGISRoute()'>清除路线</label> |
|
<label style="bottom: 8px; left: 275px;" class="routeGISPublicIcon" (click)='queryGISRoute()'>查询</label> |
|
<div class="routeLeft" (click)='exchangeGISRoute()'><mat-icon>import_export</mat-icon></div> |
|
<div class="routeContent"> |
|
<div class="routeEveryRow"> |
|
<label class="routeText">起</label> |
|
<input type="text" list="start" [(ngModel)]="routeStart" (ngModelChange)="routeChange(0)"> |
|
<datalist id="start"> |
|
<option *ngFor="let item of routeStartList" value="{{item.district}} {{item.name}}"> |
|
</datalist> |
|
<label class="routeClear" *ngIf="routeStart" (click)='deleteSearchGIS(0)'>×</label> |
|
</div> |
|
<div class="routeEveryRow"> |
|
<label class="routeText">终</label> |
|
<input type="text" list="end" [(ngModel)]="routeEnd" (ngModelChange)="routeChange(1)"> |
|
<datalist id="end"> |
|
<option *ngFor="let item of routeEndList" value="{{item.district}} {{item.name}}"> |
|
</datalist> |
|
<label class="routeClear" *ngIf="routeEnd" (click)='deleteSearchGIS(1)'>×</label> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="routeCenter" *ngIf="routes.steps.length"> |
|
<div style="text-align: center;"> |
|
<button class="routeType" [ngClass]="{'selectRouteType': selectType}" (click)='toggleRoute(true)'>推荐方案</button> |
|
<button class="routeType" [ngClass]="{'selectRouteType': !selectType}" (click)='toggleRoute(false)'>躲避拥堵</button> |
|
</div> |
|
<div class="routeTypeExplain" style="text-align: center; font-weight: 550;"> |
|
<label>约{{ routes.time / 60 | number:'0.0-0' }}分钟</label> |
|
<label>{{ routes.distance / 1000 | number:'0.1-1' }}公里</label> |
|
</div> |
|
<div class="routeTypeExplain" style="color: rgb(176, 180, 184); margin-top: -10px;"> |
|
<label>途径</label> |
|
<span *ngFor="let item of routes.steps">{{item.road? item.road + '>' : null}}</span> |
|
</div> |
|
<div class="routeCenterTB" title="{{routeStart}}"> |
|
<p style="background-color: #0080FF;">起</p><label style="font-weight: 550;">{{routeStart}}</label> |
|
</div> |
|
<div class="routeCenterTB" *ngFor="let item of routes.steps" style="border-bottom: 1px solid rgb(223, 212, 212);" title="{{item.instruction}}"> |
|
<p class="orientation" *ngIf="item.orientation == '西'">←</p> |
|
<p class="orientation" *ngIf="item.orientation == '北'">↑</p> |
|
<p class="orientation" *ngIf="item.orientation == '东'">→</p> |
|
<p class="orientation" *ngIf="item.orientation == '南'">↓</p> |
|
<p class="orientation" *ngIf="item.orientation == '西北'">↖</p> |
|
<p class="orientation" *ngIf="item.orientation == '西南'">↙</p> |
|
<p class="orientation" *ngIf="item.orientation == '东北'">↗</p> |
|
<p class="orientation" *ngIf="item.orientation == '东南'">↘</p> |
|
<label>{{item.instruction}}</label> |
|
</div> |
|
<div class="routeCenterTB" title="{{routeEnd}}"> |
|
<p style="background-color: rgb(250, 21, 21);">终</p><label style="font-weight: 550;">{{routeEnd}}</label> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 导航路线 --> |
|
|
|
<button class="submitRouter" mat-raised-button color='primary' (click)='submitRouter()'>保存路线</button> |
|
|
|
</div>
|
|
|