edit

2021-12-20 09:34:46 +08:00
parent 4e29393386
commit 46fb4d51e8
6 changed files with 0 additions and 268 deletions
--- 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 +0,0 @@
 <div nz-row style="margin-bottom: 24px">
  <div nz-col nzSpan="8">
    <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
  </div>
 </div>
 <div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
--- 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,65 +0,0 @@
 import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
 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-gaode-map',
  templateUrl: './gaode-map.component.html'
 })
 export class GaodeMapComponent implements OnInit, OnDestroy {
  addressInput: any;
  aMap: any;
  constructor(private service: BaseService) {}
  ngOnInit(): void {
    this.mapInit();
    // this.PoiPicker();
  }
  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);
      });
  }
 }
--- a/src/app/routes/supply-management/components/gaode-map/gaode-map.component.html
+++ b/src/app/routes/supply-management/components/gaode-map/gaode-map.component.html
@ -1,6 +0,0 @@
 <div nz-row class="mb-xl">
  <div nz-col nzSpan="8">
    <input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
  </div>
 </div>
 <div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
--- a/src/app/routes/supply-management/components/gaode-map/gaode-map.component.less
+++ b/src/app/routes/supply-management/components/gaode-map/gaode-map.component.less
@ -1,8 +0,0 @@
 :host::ng-deep {
    p.my-desc {
        max-width      : 300px;
        margin     : 5px 0;
        line-height: 150%;
        padding    : 12px;
    }
 }
--- a/src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts
+++ b/src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts
@ -1,181 +0,0 @@
 import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
 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';
 declare var AMap: any;
 declare var AMapUI: any;
@Component({
  selector: 'app-gaode-map',
  styleUrls: ['./gaode-map.component.less'],
  templateUrl: './gaode-map.component.html'
 })
 export class GaodeMapComponent implements OnInit, OnDestroy {
  @ViewChild('modal')
  modal: any;
  addressInput: any;
  aMap: any;
  constructor(private service: BaseService) {}
  ngOnInit(): void {
    this.mapInit();
    // this.PoiPicker();
  }
  ngOnDestroy(): void {
    if (this.aMap) {
      this.aMap.destroy();
    }
  }
  mapInit() {
    console.log(AMapLoader);
    AMapLoader.load({
      // 首次调用 load
      key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.SimpleMarker',
        'AMap.PoiPicker',
        'AMap.Scale',
        'AMap.Marker',
        'AMap.InfoWindow',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.Driving',
        'AMap.Geolocation'
      ],
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: '2.0' // Loca 版本，缺省 1.3.2
      }
    })
      .then(AMap => {
        console.log(AMap);
        var poiPicker = new AMapUI.PoiPicker({
          //city:'北京',
          input: 'pickerInput'
        });
        console.log(poiPicker);
        this.aMap = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 16
        });
        console.log(this.aMap);
        this.aMap.on('complete', () => {
          this.service.msgSrv.info('地图加载完成 !');
          this.poiPickerReady(poiPicker);
          // new AMapUI.SimpleMarker({
          //   //前景文字
          //   iconLabel: 'A',
          //   //图标主题
          //   iconTheme: 'default',
          //   //背景图标样式
          //   iconStyle: 'red',
          //   map: this.aMap,
          //   position: this.aMap.getCenter()
          // });
        });
      })
      .catch(e => {
        throwError(e);
      });
  }
  poiPickerReady(poiPicker: any) {
    (window as any).poiPicker = poiPicker;
    const map = this.aMap;
    const _this = this;
    var marker = new AMapUI.SimpleMarker();
    console.log(marker);
    var infoWindow = new AMap.InfoWindow({
      offset: new AMap.Pixel(0, -20)
    });
    console.log(infoWindow);
    //选取了某个POI
    poiPicker.on('poiPicked', function (poiResult: any) {
      var source = poiResult.source,
        poi = poiResult.item,
        info = {
          source: source,
          id: poi.id,
          name: poi.name,
          location: poi.location.toString(),
          address: poi.address
        };
      console.log(poi);
      marker.setMap(map);
      infoWindow.setMap(map);
      marker.setPosition(poi.location);
      infoWindow.setPosition(poi.location);
      infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
      infoWindow.open(map, marker.getPosition());
      map.setCenter(marker.getPosition());
    });
    poiPicker.onCityReady(function () {
      poiPicker.suggest('美食');
    });
  }
  createInfoWindow(title: any, content: any) {
    var info = document.createElement('div');
    info.className = 'custom-info input-card content-window-card';
    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement('div');
    var titleD = document.createElement('div');
    var closeX = document.createElement('img');
    top.className = 'info-top';
    titleD.innerHTML = title;
    closeX.src = 'https://webapi.amap.com/images/close2.gif';
    closeX.onclick = this.closeInfoWindow;
    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);
    // 定义中部内容
    var middle = document.createElement('div');
    middle.className = 'info-middle';
    middle.style.backgroundColor = 'white';
    middle.innerHTML = content;
    info.appendChild(middle);
    // 定义底部内容
    var bottom = document.createElement('div');
    bottom.className = 'info-bottom';
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement('img');
    sharp.src = 'https://webapi.amap.com/images/sharp.png';
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
  }
  closeInfoWindow() {
    this.aMap.clearInfoWindow();
  }
 }
--- a/src/app/routes/supply-management/supply-management.module.ts
+++ b/src/app/routes/supply-management/supply-management.module.ts
@ -21,7 +21,6 @@ import { SupplyManagementBulkDetailComponent } from './components/bulk-detail/bu
 import { SupplyManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component';
 import { SupplyManagementAddDriversComponent } from './components/add-drivers/add-drivers.component';
 import { SupplyManagementOnecarPublishComponent } from './components/onecar-publish/onecar-publish.component';
 import { GaodeMapComponent } from './components/gaode-map/gaode-map.component';
 import { PublishGoodsChooseFamifiarComponent } from './components/choose-famifiar/choose-famifiar.component';
 import { PublishchooseFamifiarSetCaptainComponent } from './components/choose-famifiar/set-captain/set-captain.component';
 import { PublishchooseFamifiarAddComponent } from './components/choose-famifiar/add/add.component';
@ -42,7 +41,6 @@ const COMPONENTS: Type<void>[] = [
  SupplyManagementVehicleDetailComponent,
  SupplyManagementAddDriversComponent,
  SupplyManagementOnecarPublishComponent,
  GaodeMapComponent,
  PublishGoodsChooseFamifiarComponent,
  PublishchooseFamifiarSetCaptainComponent,
  PublishchooseFamifiarAddComponent,