diff --git a/src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts b/src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts index ac351533..abf5ac38 100644 --- a/src/app/routes/order-management/components/bulk-detail/bulk-detail.component.ts +++ b/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信息: 
${JSON.stringify(info, null, 2)}
`); - infoWindow.open(map, marker.getPosition()); - - map.setCenter(marker.getPosition()); - }); - poiPicker.onCityReady(() => { - // poiPicker.suggest('美食'); - }); - }); - } } diff --git a/src/app/routes/order-management/components/gaode-map/gaode-map.component.html b/src/app/routes/order-management/components/gaode-map/gaode-map.component.html index 47e3da45..1a26554b 100644 --- a/src/app/routes/order-management/components/gaode-map/gaode-map.component.html +++ b/src/app/routes/order-management/components/gaode-map/gaode-map.component.html @@ -1,6 +1,6 @@
- +
-
+
diff --git a/src/app/routes/order-management/components/gaode-map/gaode-map.component.ts b/src/app/routes/order-management/components/gaode-map/gaode-map.component.ts index 81f96c8b..f95d253d 100644 --- a/src/app/routes/order-management/components/gaode-map/gaode-map.component.ts +++ b/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信息: 
${JSON.stringify(info, null, 2)}
`); - infoWindow.open(map, marker.getPosition()); - - map.setCenter(marker.getPosition()); - }); - poiPicker.onCityReady(() => { - // poiPicker.suggest('美食'); - }); - }); } } diff --git a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts index 62df3b0c..89371f0a 100644 --- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts +++ b/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信息: 
${JSON.stringify(info, null, 2)}
`); - infoWindow.open(map, marker.getPosition()); - - map.setCenter(marker.getPosition()); - }); - poiPicker.onCityReady(() => { - // poiPicker.suggest('美食'); - }); - }); - } } diff --git a/src/app/routes/order-management/order-management.module.ts b/src/app/routes/order-management/order-management.module.ts index 816f6970..d64cc239 100644 --- a/src/app/routes/order-management/order-management.module.ts +++ b/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[] = [ OrderManagementVehicleComponent, OrderManagementVehicleDetailComponent, - OrderManagementGaodeMapComponent, OrderManagementBulkComponent, OrderManagementBulkeDetailComponent ];