修改地图使用方式

package-lock.json

@@ -19,6 +19,11 @@
         }
       }
     },
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.nlark.com/@amap/amap-jsapi-loader/download/@amap/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha1-nsS01dJGfqxFH2yFLjXbaen58MA="
+    },
     "@ampproject/remapping": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/download/@ampproject/remapping-1.0.1.tgz",
@@ -2803,14 +2808,6 @@
         "@types/jasmine": "*"
       }
     },
-    "@types/jquery": {
-      "version": "3.5.9",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.9.tgz",
-      "integrity": "sha512-B8pDk+sH/tSv/HKdx6EQER6BfUOb2GtKs0LOmozziS4h7cbe8u/eYySfUAeTwD+J09SqV3man7AMWIA5mgzCBA==",
-      "requires": {
-        "@types/sizzle": "*"
-      }
-    },
     "@types/js-base64": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/@types/js-base64/download/@types/js-base64-3.3.1.tgz",
@@ -2888,11 +2885,6 @@
       "integrity": "sha1-KOzt528VsTVTtOhgdNTPmgu+ScQ=",
       "dev": true
     },
-    "@types/sizzle": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
-      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
-    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/@types/source-list-map/download/@types/source-list-map-0.1.2.tgz?cache=0&sync_timestamp=1637284095686&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fsource-list-map%2Fdownload%2F%40types%2Fsource-list-map-0.1.2.tgz",
@@ -9344,11 +9336,6 @@
         }
       }
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
-    },
     "js-base64": {
       "version": "3.7.2",
       "resolved": "https://registry.npmmirror.com/js-base64/download/js-base64-3.7.2.tgz",

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@agm/core": "^1.1.0",
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@angular/animations": "~12.2.0",
     "@angular/common": "~12.2.0",
     "@angular/compiler": "~12.2.0",
@@ -55,8 +56,6 @@
     "ajv": "^8.6.2",
     "angular-baidu-maps": "^12.0.0",
     "file-saver": "^2.0.5",
-    "@types/jquery": "^3.5.9",
-    "jquery": "^3.6.0",
     "js-base64": "^3.6.1",
     "masonry-layout": "^4.2.2",
     "ng-gallery": "^5.0.0",

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

@@ -3,4 +3,4 @@
     <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
   </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/supply-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';
+import { load } from '@amap/amap-jsapi-loader';
-declare var AMapUI: any;
+import { BaseService } from 'src/app/shared/services';
-declare var AMap: any;
+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 {
+export class GaodeMapComponent implements OnInit, OnDestroy {
   addressInput: any;
-  constructor() {}
+
+  aMap: any;
+  constructor(private service: BaseService) {}
   ngOnInit(): void {
-    this.PoiPicker();
+    this.mapInit();
+    // this.PoiPicker();
   }
 
-  // poi选点
+  ngOnDestroy(): void {
-  PoiPicker() {
+    if (this.aMap) {
-    AMapUI.setDomLibrary($);
+      this.aMap.destroy();
-    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();
+  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);
 
-      var infoWindow = new AMap.InfoWindow({
+        this.aMap = new AMap.Map('container', {
-        offset: new AMap.Pixel(0, -20)
+          viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
+          zoom: 16
         });
-      console.log('0000')
+        this.aMap.on('complete', () => {
-      console.log(PoiPicker)
+          this.service.msgSrv.info('地图加载完成 !');
-      //选取了某个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('美食');
         });
+      })
+      .catch(e => {
+        throwError(e);
       });
   }
 }

src/index.html

@@ -8,7 +8,8 @@
 -->
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
   <meta charset="utf-8" />
   <title>Ng Alain Pro</title>
   <base href="/" />
@@ -29,35 +30,37 @@
       z-index: 9999;
       transition: opacity 0.65s;
     }
+
     .preloader-hidden-add {
       opacity: 1;
       display: block;
     }
+
     .preloader-hidden-add-active {
       opacity: 0;
     }
+
     .preloader-hidden {
       display: none;
     }
   </style>
-  </head>
+</head>
 
-  <body theme-name="pro" theme-version="12.0.0">
+<body theme-name="pro" theme-version="12.0.0">
   <app-root></app-root>
   <div class="preloader">
     <div class="page-loading ant-spin ant-spin-lg ant-spin-spinning">
-        <span class="ant-spin-dot ant-spin-dot-spin"
+      <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i
-          ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
+          class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
-          ><i class="ant-spin-dot-item"></i
-        ></span>
     </div>
   </div>
-  </body>
+</body>
+
 </html>
-<script type="text/javascript">
+<!-- <script type="text/javascript">
-    window._AMapSecurityConfig = {
+  window._AMapSecurityConfig = {
-        securityJsCode:'dde4610c3bd04617b99fb55ba5adbe9d',
+    securityJsCode: 'dde4610c3bd04617b99fb55ba5adbe9d',
-    }
+  }
-  </script>
+</script>
-  <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
+<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
-  <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
+<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> -->

src/style-icons-auto.ts

@@ -54,7 +54,8 @@ import {
   WeiboCircleOutline,
   EyeInvisibleOutline,
   MoreOutline,
-  MenuOutline
+  MenuOutline,
+  SwapOutline
 } from '@ant-design/icons-angular/icons';
 
 export const ICONS_AUTO = [
@@ -108,5 +109,6 @@ export const ICONS_AUTO = [
   WeiboCircleOutline,
   EyeInvisibleOutline,
   MoreOutline,
-  MenuOutline
+  MenuOutline,
+  SwapOutline
 ];