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 1a26554b..5e27508d 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 @@ -1,6 +1,6 @@ -
+
- +
-
+
\ No newline at end of file diff --git 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 new file mode 100644 index 00000000..809b5b87 --- /dev/null +++ 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; + } +} \ No newline at end of file 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 8ef17fa1..b57cfd7c 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,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('地址: 
' + poi.name + '
'); + 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(); + } } diff --git 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 index 3f4060f6..cdbe5362 100644 --- 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 }); } } diff --git 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 index cb617ef0..2738a18f 100644 --- 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 @@ -

etc-blacklist works!

+ \ No newline at end of file diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html new file mode 100644 index 00000000..6794d28a --- /dev/null +++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.less b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts new file mode 100644 index 00000000..0d350056 --- /dev/null +++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts @@ -0,0 +1,177 @@ +import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core'; +import { BaseService } from 'src/app/shared/services'; +import { throwError } from 'rxjs'; +import AMapLoader from '@amap/amap-jsapi-loader'; +import { amapConf } from '@conf/amap.config'; +declare var AMap: any; +declare var AMapUI: any; +declare var Loca: any; + +const CONFIG = amapConf; +@Component({ + selector: 'amap-path-simplifier', + templateUrl: './amap-path-simplifier.component.html', + styleUrls: ['./amap-path-simplifier.component.less'] +}) +export class AmapPathSimplifierComponent implements OnInit, OnChanges { + aMap: any; + pathSimplifierIns: any; + + @Input() + pathList = [ + { + name: '路线1', + points: [ + { + name: '点a', + lnglat: [116.405289, 39.904987] + }, + { + name: '点b', + lnglat: [113.964458, 40.54664] + }, + { + name: '点c', + lnglat: [111.47836, 41.135964] + }, + { + name: '点d', + lnglat: [108.949297, 41.670904] + }, + { + name: '点e', + lnglat: [106.380111, 42.149509] + }, + { + name: '点f', + lnglat: [103.774185, 42.56996] + }, + { + name: '点g', + lnglat: [101.135432, 42.930601] + }, + { + name: '点h', + lnglat: [98.46826, 43.229964] + }, + { + name: '点i', + lnglat: [95.777529, 43.466798] + }, + { + name: '点j', + lnglat: [93.068486, 43.64009] + }, + { + name: '点k', + lnglat: [90.34669, 43.749086] + }, + { + name: '点l', + lnglat: [87.61792, 43.793308] + } + ] + } + ]; + @Input() + selectedIndex = 0; + @Input() + mapWidth = '800px'; + + @Input() + mapHeight = '500px'; + + @Output() + clcikPointEvent = new EventEmitter(); + + constructor() {} + ngOnChanges(changes: SimpleChanges): void { + if (changes.pathList.currentValue && this.pathSimplifierIns) { + this.setData(changes.pathList.currentValue); + } + } + ngOnInit(): void { + this.mapInit(); + } + + ngOnDestroy(): void { + if (this.aMap) { + this.aMap.destroy(); + } + } + + mapInit() { + AMapLoader.load({ + key: CONFIG.key, + version: CONFIG.version, + plugins: [ + // 需要使用的的插件列表，如比例尺'AMap.Scale'等 + 'AMap.PathSimplifier' + ], + AMapUI: { + version: CONFIG.AMapUIVersion, + plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件 + }, + }) + .then(AMap => { + this.aMap = new AMap.Map('container', { + zoom: 4 + }); + + this.aMap.on('complete', () => { + // this.service.msgSrv.info('地图加载完成 !'); + this.pathInit(); + }); + }) + .catch(e => { + throwError(e); + }); + } + + pathInit() { + this.pathSimplifierIns = new AMapUI.PathSimplifier({ + zIndex: 100, + //autoSetFitView:false, + map: this.aMap, //所属的地图实例 + + getPath: function (pathData: any, pathIndex: any) { + var points = pathData.points, + lnglatList = []; + + for (var i = 0, len = points.length; i < len; i++) { + lnglatList.push(points[i].lnglat); + } + + return lnglatList; + }, + getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) { + if (pointIndex >= 0) { + //point + return pathData.name + '，' + pathData.points[pointIndex].name; + } + return pathData.name + '，点数量' + pathData.points.length; + }, + renderOptions: { + renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1 + } + }); + + (window as any).pathSimplifierIns = this.pathSimplifierIns; + this.setData(this.pathList); + + this.setPathIndex(this.selectedIndex); + + this.pathSimplifierIns.on('pointClick', (e: any, info: any) => { + this.clcikPointEvent.emit({ e, info }); + console.log('Click: ' + info.pathData.points[info.pointIndex].name); + }); + } + + setData(pathList: Array) { + this.pathSimplifierIns.setData(pathList); + } + + setPathIndex(index: number) { + this.pathSimplifierIns.setSelectedPathIndex(index); + } +} diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.html b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.html new file mode 100644 index 00000000..742b309c --- /dev/null +++ b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.html @@ -0,0 +1,6 @@ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.less b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.less new file mode 100644 index 00000000..fa02327b --- /dev/null +++ b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.less @@ -0,0 +1,8 @@ +:host::ng-deep { + p.my-desc { + max-width : 300px; + margin : 5px 0; + line-height: 150%; + padding : 12px; + } +} \ No newline at end of file diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts new file mode 100644 index 00000000..3f167d20 --- /dev/null +++ b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts @@ -0,0 +1,124 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { throwError } from 'rxjs'; +import AMapLoader from '@amap/amap-jsapi-loader'; +import { amapConf } from '@conf/amap.config'; +declare var AMap: any; +declare var AMapUI: any; +declare var Loca: any; + +const CONFIG = amapConf; + +@Component({ + selector: 'amap-poi-picker', + templateUrl: './amap-poi-picker.component.html', + styleUrls: ['./amap-poi-picker.component.less'] +}) +export class AmapPoiPickerComponent implements OnInit { + @ViewChild('modal') + modal: any; + addressInput: any; + + aMap: any; + + poi: any; + + constructor() {} + ngOnInit(): void { + this.mapInit(); + // this.PoiPicker(); + } + + ngOnDestroy(): void { + if (this.aMap) { + this.aMap.destroy(); + } + } + + mapInit() { + AMapLoader.load({ + // 首次调用 load + key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填 + version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 + plugins: [ + // 需要使用的的插件列表，如比例尺'AMap.Scale'等 + 'AMap.SimpleMarker', + 'AMap.PoiPicker', + 'AMap.Scale', + 'AMap.InfoWindow', + 'AMap.Geolocation' + ], + AMapUI: { + // 是否加载 AMapUI，缺省不加载 + version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1 + plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件 + }, + Loca: { + // 是否加载 Loca， 缺省不加载 + version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2 + } + }) + .then(AMap => { + // 搜索picker + var poiPicker = new AMapUI.PoiPicker({ + input: 'pickerInput' + }); + + // 地图 + this.aMap = new AMap.Map('container', { + resizeEnable: true, + zoom: 16 + }); + + // 地图创建成功 + this.aMap.on('complete', () => { + this.poiPickerReady(poiPicker); + }); + }) + .catch(e => { + throwError(e); + }); + } + + poiPickerReady(poiPicker: any) { + (window as any).poiPicker = poiPicker; + const map = this.aMap; + // 定位标志 + const marker = new AMapUI.SimpleMarker({ + //图标主题 + iconTheme: 'default', + map: map, + position: map.getCenter() + }); + + // 信息窗口 + const infoWindow = new AMap.InfoWindow({ + offset: new AMap.Pixel(0, -20) + }); + + //选取了某个POI + poiPicker.on('poiPicked', (poiResult: any) => { + const source = poiResult.source, + poi = poiResult.item; + console.log(poi); + this.poi = poi; + marker.setMap(map); + infoWindow.setMap(map); + + marker.setPosition(poi.location); + infoWindow.setPosition(poi.location); + + infoWindow.setContent('地址: 
' + poi.name + '
'); + infoWindow.open(map, marker.getPosition()); + + map.setCenter(marker.getPosition()); + }); + + poiPicker.onCityReady(function () { + poiPicker.suggest('美食'); + }); + } + + closeInfoWindow() { + this.aMap.clearInfoWindow(); + } +} diff --git a/src/app/shared/components/amap/amap.module.ts b/src/app/shared/components/amap/amap.module.ts new file mode 100644 index 00000000..01b4a67c --- /dev/null +++ b/src/app/shared/components/amap/amap.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AmapPoiPickerComponent } from './amap-poi-picker/amap-poi-picker.component'; +import { FormsModule } from '@angular/forms'; +import { AmapPathSimplifierComponent } from './amap-path-simplifier/amap-path-simplifier.component'; + +const COMPONENTS = [AmapPoiPickerComponent, AmapPathSimplifierComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule, FormsModule], + exports: COMPONENTS +}) +export class AmapModule {} diff --git a/src/app/shared/components/amap/amap.service.ts b/src/app/shared/components/amap/amap.service.ts new file mode 100644 index 00000000..b65e03c6 --- /dev/null +++ b/src/app/shared/components/amap/amap.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class AmapService { + + constructor() { } +} diff --git a/src/app/shared/components/amap/index.ts b/src/app/shared/components/amap/index.ts new file mode 100644 index 00000000..b31374a1 --- /dev/null +++ b/src/app/shared/components/amap/index.ts @@ -0,0 +1,4 @@ +export * from './amap.module'; +export * from './amap.service'; +export * from './amap-poi-picker/amap-poi-picker.component'; +export * from './amap-path-simplifier/amap-path-simplifier.component'; \ No newline at end of file diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts index 29518ad6..28f7e8a5 100644 --- a/src/app/shared/index.ts +++ b/src/app/shared/index.ts @@ -16,6 +16,7 @@ export * from './components/status-label/index'; export * from './components/scrollbar/index'; export * from './components/address/index'; export * from './components/captcha/index'; +export * from './components/amap/index'; // Utils export * from './utils'; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 1e10dace..1ceca61d 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -27,6 +27,7 @@ import { ScrollbarModule } from './components/scrollbar'; import { StatusLabelModule } from './components/status-label'; import { SharedThirdModule } from './shared-third.module'; import { LogisticsTimeLineComponent } from './components/logistics-time-line/logistics-time-line.component'; +import { AmapModule } from './components/amap/amap.module'; const MODULES = [ AddressModule, @@ -38,6 +39,7 @@ const MODULES = [ ScrollbarModule, StatusLabelModule, SharedThirdModule, + AmapModule, ...PRO_SHARED_MODULES ]; // #endregion diff --git a/src/conf/amap.config.ts b/src/conf/amap.config.ts new file mode 100644 index 00000000..25b3509e --- /dev/null +++ b/src/conf/amap.config.ts @@ -0,0 +1,21 @@ +/** + * 高德地图资源配置 + */ +export const amapConf = { + /** + * 文件上传路径 + */ + key: '63f9573ca55fef2b92d4ffe0c85dea8f', + /** + * JSAPI版本 + */ + version: '2.0', + /** + * AMapUI版本 + */ + AMapUIVersion: '1.1', + /** + * Loca版本 + */ + LocaVersion: '2.0' +}; diff --git a/src/index.html b/src/index.html index 091ea589..7330ae04 100644 --- a/src/index.html +++ b/src/index.html @@ -57,10 +57,10 @@ - \ No newline at end of file