From 1d79ed291c16b4b7d63d19e1864593d5291b188a Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Mon, 6 Dec 2021 20:28:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 23 +--- package.json | 3 +- .../gaode-map/gaode-map.component.html | 2 +- .../gaode-map/gaode-map.component.ts | 111 +++++++++--------- src/index.html | 103 ++++++++-------- src/style-icons-auto.ts | 6 +- 6 files changed, 117 insertions(+), 131 deletions(-) diff --git a/package-lock.json b/package-lock.json index ceabf34c..e6644c58 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4dc5516c..66149bde 100644 --- a/package.json +++ b/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", diff --git 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 index 3088f6f1..1a26554b 100644 --- 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 @@ -3,4 +3,4 @@ -
+
diff --git 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 index f84c4064..f95d253d 100644 --- 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,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-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选点 - 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/index.html b/src/index.html index c8f4871e..543758d5 100644 --- a/src/index.html +++ b/src/index.html @@ -8,56 +8,59 @@ --> - - - Ng Alain Pro - - - - - - - - - - -
-
- -
+ + + Ng Alain Pro + + + + + + + + + + + +
+
+
- +
+ + - - - + \ No newline at end of file diff --git a/src/style-icons-auto.ts b/src/style-icons-auto.ts index f5a95b10..3668fed2 100644 --- a/src/style-icons-auto.ts +++ b/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 ];