edit

2021-12-07 13:25:52 +08:00
parent 34c9809e3e
commit 485686c4ab
18 changed files with 639 additions and 21 deletions
--- 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 +1,6 @@
-<div nz-row style="margin-bottom: 24px">
+<div nz-row class="mb-xl">
  <div nz-col nzSpan="8">
-    <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
+    <input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
  </div>
 </div>
-<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></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
@ -0,0 +1,8 @@
+: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,15 +1,19 @@
-import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+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;
@ -35,7 +39,10 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
      plugins: [
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.SimpleMarker',
+        'AMap.PoiPicker',
        'AMap.Scale',
+        'AMap.Marker',
+        'AMap.InfoWindow',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.Driving',
@ -44,7 +51,7 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
-        plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
+        plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
@ -54,25 +61,121 @@ export class GaodeMapComponent implements OnInit, OnDestroy {
      .then(AMap => {
        console.log(AMap);

-        this.aMap = new AMap.Map('container');
+        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('地图加载完成 !');
-          new AMapUI.SimpleMarker({
-            //前景文字
-            iconLabel: 'A',
-            //图标主题
-            iconTheme: 'default',
-            //背景图标样式
-            iconStyle: 'red',
-            map: this.aMap,
-            position: this.aMap.getCenter()
-          });
+          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/components/onecar-publish/onecar-publish.component.ts
+++ b/src/app/routes/supply-management/components/onecar-publish/onecar-publish.component.ts
@ -11,6 +11,7 @@ import {
  SFUISchema
 } from '@delon/form';
 import { _HttpClient } from '@delon/theme';
+import { AmapPoiPickerComponent } from '@shared';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';

 import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component';
@ -489,8 +490,8 @@ export class  SupplyManagementOnecarPublishComponent implements OnInit {
  openMap() {
    this.modalService.create({
      nzTitle: '',
-      nzContent: GaodeMapComponent,
-      nzWidth: 1200
+      nzContent: AmapPoiPickerComponent,
+      nzWidth: 848
    });
  }
 }
--- a/src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.html
+++ b/src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.html
@ -1 +1 @@
-<p>etc-blacklist works!</p>
+<amap-path-simplifier></amap-path-simplifier>