订单

src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-06 20:21:29
+ * @LastEditTime: 2021-12-06 20:34:08
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@@ -13,10 +13,6 @@ import { _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { SupplyManagementService } from '../../services/order-management.service';
-import { OrderManagementGaodeMapComponent } from '../gaode-map/gaode-map.component';
-import * as $ from 'jquery';
-declare var AMapUI: any;
-declare var AMap: any;
 @Component({
   selector: 'app-supply-management-bulk-detail',
   templateUrl: './bulk-detail.component.html',
@@ -52,7 +48,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
   hand() {
     this.modalService.create({
       nzTitle: '',
-      nzContent: OrderManagementGaodeMapComponent,
+      // nzContent: OrderManagementGaodeMapComponent,
       nzWidth: 1200
     });
   }
@@ -61,56 +57,4 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
     window.history.go(-1);
   }
   
-  // poi选点
-  PoiPicker() {
-    AMapUI.setDomLibrary($);
-    let map = new AMap.Map('container', {
-      zoom: 10
-    });
-    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
-      let poiPicker = new PoiPicker({
-        // city:'北京',
-        input: 'pickerInput'
-      });
-      //初始化poiPicker
-      (window as any).poiPicker = poiPicker;
-
-      var marker = new AMap.Marker();
-
-      var infoWindow = new AMap.InfoWindow({
-        offset: new AMap.Pixel(0, -20)
-      });
-      console.log('0000')
-      console.log(PoiPicker)
-      //选取了某个POI
-      poiPicker.on('poiPicked', function (poiResult: any) {
-        console.log(1111);
-        console.log(poiResult)
-        // console.log(this.addressInput)
-        // this.addressInput = poiResult.item?.name
-        var source = poiResult.source,
-          poi = poiResult.item,
-          info = {
-            source: source,
-            id: poi.id,
-            name: poi.name,
-            location: poi.location.toString(),
-            address: poi.address
-          };
-        marker.setMap(map);
-        infoWindow.setMap(map);
-
-        marker.setPosition(poi.location);
-        infoWindow.setPosition(poi.location);
-
-        infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
-        infoWindow.open(map, marker.getPosition());
-
-        map.setCenter(marker.getPosition());
-      });
-      poiPicker.onCityReady(() => {
-        // poiPicker.suggest('美食');
-      });
-    });
-  }
 }

src/app/routes/order-management/components/gaode-map/gaode-map.component.html

@@ -1,6 +1,6 @@
 <div nz-row style="margin-bottom: 24px">
-  <!-- <div nz-col nzSpan="8">
+  <div nz-col nzSpan="8">
     <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
-  </div> -->
+  </div>
 </div>
-<div id="container" style="width: 800px; height: 500px"></div>
+<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>

src/app/routes/order-management/components/gaode-map/gaode-map.component.ts

@@ -1,70 +1,65 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
-import * as $ from 'jquery';
-declare var AMapUI: any;
-declare var AMap: any;
-
+import { load } from '@amap/amap-jsapi-loader';
+import { BaseService } from 'src/app/shared/services';
+import { throwError } from 'rxjs';
+import AMapLoader from '@amap/amap-jsapi-loader';
 @Component({
-  selector: 'app-ordermanage-map',
+  selector: 'app-gaode-map',
   templateUrl: './gaode-map.component.html'
 })
-export class OrderManagementGaodeMapComponent implements OnInit {
+export class GaodeMapComponent implements OnInit, OnDestroy {
   addressInput: any;
-  constructor() {}
+
+  aMap: any;
+  constructor(private service: BaseService) {}
   ngOnInit(): void {
-    this.PoiPicker();
+    this.mapInit();
+    // this.PoiPicker();
   }
 
-  // poi选点
-  PoiPicker() {
-    AMapUI.setDomLibrary($);
-    let map = new AMap.Map('container', {
-      zoom: 10
-    });
-    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
-      let poiPicker = new PoiPicker({
-        // city:'北京',
-        input: 'pickerInput'
+  ngOnDestroy(): void {
+    if (this.aMap) {
+      this.aMap.destroy();
+    }
+  }
+
+  mapInit() {
+    AMapLoader.load({
+      // 首次调用 load
+      key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: [
+        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        'AMap.Scale',
+        'AMap.ToolBar',
+        'AMap.MapType',
+        'AMap.Driving',
+        'AMap.Geolocation'
+      ],
+      AMapUI: {
+        // 是否加载 AMapUI，缺省不加载
+        version: '1.1', // AMapUI 缺省 1.1
+        plugins: [] // 需要加载的 AMapUI ui插件
+      },
+      Loca: {
+        // 是否加载 Loca， 缺省不加载
+        version: '2.0' // Loca 版本，缺省 1.3.2
+      }
+    })
+      .then(AMap => {
+        console.log(AMap);
+
+        this.aMap = new AMap.Map('container', {
+          viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
+          zoom: 16
+        });
+        this.aMap.on('complete', () => {
+          this.service.msgSrv.info('地图加载完成 !');
+        });
+      })
+      .catch(e => {
+        throwError(e);
       });
-      //初始化poiPicker
-      (window as any).poiPicker = poiPicker;
-
-      var marker = new AMap.Marker();
-
-      var infoWindow = new AMap.InfoWindow({
-        offset: new AMap.Pixel(0, -20)
-      });
-      console.log('0000')
-      console.log(PoiPicker)
-      //选取了某个POI
-      poiPicker.on('poiPicked', function (poiResult: any) {
-        console.log(1111);
-        console.log(poiResult)
-        // console.log(this.addressInput)
-        // this.addressInput = poiResult.item?.name
-        var source = poiResult.source,
-          poi = poiResult.item,
-          info = {
-            source: source,
-            id: poi.id,
-            name: poi.name,
-            location: poi.location.toString(),
-            address: poi.address
-          };
-        marker.setMap(map);
-        infoWindow.setMap(map);
-
-        marker.setPosition(poi.location);
-        infoWindow.setPosition(poi.location);
-
-        infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
-        infoWindow.open(map, marker.getPosition());
-
-        map.setCenter(marker.getPosition());
-      });
-      poiPicker.onCityReady(() => {
-        // poiPicker.suggest('美食');
-      });
-    });
   }
 }

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-06 19:36:24
+ * @LastEditTime: 2021-12-06 20:34:43
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@@ -13,10 +13,6 @@ import { _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { SupplyManagementService } from '../../services/order-management.service';
-import { OrderManagementGaodeMapComponent } from '../gaode-map/gaode-map.component';
-import * as $ from 'jquery';
-declare var AMapUI: any;
-declare var AMap: any;
 @Component({
   selector: 'app-supply-management-vehicle-detail',
   templateUrl: './vehicle-detail.component.html',
@@ -52,7 +48,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
   hand() {
     this.modalService.create({
       nzTitle: '',
-      nzContent: OrderManagementGaodeMapComponent,
+      // nzContent: OrderManagementGaodeMapComponent,
       nzWidth: 1200
     });
   }
@@ -61,56 +57,4 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
     window.history.go(-1);
   }
   
-  // poi选点
-  PoiPicker() {
-    AMapUI.setDomLibrary($);
-    let map = new AMap.Map('container', {
-      zoom: 10
-    });
-    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
-      let poiPicker = new PoiPicker({
-        // city:'北京',
-        input: 'pickerInput'
-      });
-      //初始化poiPicker
-      (window as any).poiPicker = poiPicker;
-
-      var marker = new AMap.Marker();
-
-      var infoWindow = new AMap.InfoWindow({
-        offset: new AMap.Pixel(0, -20)
-      });
-      console.log('0000')
-      console.log(PoiPicker)
-      //选取了某个POI
-      poiPicker.on('poiPicked', function (poiResult: any) {
-        console.log(1111);
-        console.log(poiResult)
-        // console.log(this.addressInput)
-        // this.addressInput = poiResult.item?.name
-        var source = poiResult.source,
-          poi = poiResult.item,
-          info = {
-            source: source,
-            id: poi.id,
-            name: poi.name,
-            location: poi.location.toString(),
-            address: poi.address
-          };
-        marker.setMap(map);
-        infoWindow.setMap(map);
-
-        marker.setPosition(poi.location);
-        infoWindow.setPosition(poi.location);
-
-        infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
-        infoWindow.open(map, marker.getPosition());
-
-        map.setCenter(marker.getPosition());
-      });
-      poiPicker.onCityReady(() => {
-        // poiPicker.suggest('美食');
-      });
-    });
-  }
 }

src/app/routes/order-management/order-management.module.ts

@@ -2,7 +2,6 @@ import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
 import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
 import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
-import {  OrderManagementGaodeMapComponent } from './components/gaode-map/gaode-map.component';
 import { OrderManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component';
 
 import { OrderManagementVehicleComponent } from './components/vehicle/vehicle.component';
@@ -11,7 +10,6 @@ import { OrderManagementRoutingModule } from './order-management-routing.module'
 const COMPONENTS: Type<void>[] = [
   OrderManagementVehicleComponent,
   OrderManagementVehicleDetailComponent,
-  OrderManagementGaodeMapComponent,
   OrderManagementBulkComponent,
   OrderManagementBulkeDetailComponent
 ];