From ff3e2fbb437decdee542282b7b71fe2581b8f715 Mon Sep 17 00:00:00 2001 From: anxinCPF <1105965053@qq.com> Date: Sat, 26 Jun 2021 12:30:21 +0800 Subject: [PATCH] =?UTF-8?q?autocomplate=E5=B0=81=E8=A3=85=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gis-labeling/gis-labeling.component.ts | 4 +- .../router-gis/router-gis.component.ts | 4 +- src/app/searchComponent.service.ts | 3 +- .../SearchDownListPlugins/SearchDownList.html | 1 - .../SearchDownListPlugins/SearchDownList.scss | 2 +- .../SearchDownListPlugins/SearchDownList.ts | 46 ++++++------- src/modules/map/declare/gaode-map.ts | 35 +++------- src/modules/map/declare/keda-map.ts | 68 +++++++++++++------ src/modules/map/declare/map.d.ts | 19 +++++- 9 files changed, 102 insertions(+), 80 deletions(-) diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts index 6966c5a..5a07972 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -1431,7 +1431,7 @@ export class GisLabelingComponent implements OnInit { this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config); return } else { - this.routeGIS.search(this.startCoordinate, this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, function (status, result) { if (status === 'complete') { that.routes = result.routes[0] @@ -1454,7 +1454,7 @@ export class GisLabelingComponent implements OnInit { }); // 根据起终点名称规划驾车导航路线 - this.routeGIS.search(this.startCoordinate, this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, function (status, result) { if (status === 'complete') { that.routes = result.routes[0] diff --git a/src/app/key-unit/router-gis/router-gis.component.ts b/src/app/key-unit/router-gis/router-gis.component.ts index afd08ec..edc9228 100644 --- a/src/app/key-unit/router-gis/router-gis.component.ts +++ b/src/app/key-unit/router-gis/router-gis.component.ts @@ -215,7 +215,7 @@ export class RouterGISComponent implements OnInit { this.snackBar.open('未查询到终点坐标信息，请输入有效地址','确定',config); return }else{ - this.routeGIS.search(this.startCoordinate,this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate,this.endCoordinate, function(status, result) { if (status === 'complete') { that.routes = result.routes[0] @@ -242,7 +242,7 @@ export class RouterGISComponent implements OnInit { policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC }); // 根据起终点名称规划驾车导航路线 - this.routeGIS.search(this.startCoordinate,this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate,this.endCoordinate, function(status, result) { if (status === 'complete') { that.routes = result.routes[0] diff --git a/src/app/searchComponent.service.ts b/src/app/searchComponent.service.ts index 6e34d11..3759d8e 100644 --- a/src/app/searchComponent.service.ts +++ b/src/app/searchComponent.service.ts @@ -6,7 +6,7 @@ import { ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef export class SearchService { constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef, private injector: Injector,) { } - //angular 动态组件 + //angular 动态添加组件 appendComponentToBody(component: any): ComponentRef { //create a component reference const componentRef = this.componentFactoryResolver.resolveComponentFactory(component).create(this.injector); @@ -21,6 +21,7 @@ export class SearchService { return componentRef as ComponentRef; } + //删除组件 removeComponentFromBody(componentRef: ComponentRef) { this.applicationRef.detachView(componentRef.hostView); componentRef.destroy(); diff --git a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html index a6c08c4..3af98ee 100644 --- a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html +++ b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html @@ -1,4 +1,3 @@
-

I'm loaded

{{item.name}}
\ No newline at end of file diff --git a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss index 1fae778..37d507c 100644 --- a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss +++ b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss @@ -12,5 +12,5 @@ padding: 4px; } .item:hover { - background-color: #007aff; + background-color: #7fb9f7; } \ No newline at end of file diff --git a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts index 5e4585c..be986ed 100644 --- a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts +++ b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts @@ -1,55 +1,53 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { AutocompleteSelect } from '../../map'; - +import { AutocompleteSelect, HtmlRender } from '../../map'; type ClickHandler = (data: AutocompleteSelect) => void; - @Component({ selector: 'SearchDownList', templateUrl: './SearchDownList.html', styleUrls: ['./SearchDownList.scss'] }) export class SearchDownList implements OnInit { - private $input; - constructor() { - } + constructor() {} + + public $input; //input public searchList: AutocompleteSelect[] = []; //list public leftCss: string = '0px'; public topCss: string = '0px'; public minWidthCss: string = '0px'; private clickHandler: ClickHandler; + ngOnInit(): void { + window.onresize = () => { + if (this.$input) { + let Dom = this.$input.getBoundingClientRect() + this.leftCss = `${Dom.left + 3}px` + this.topCss = `${Dom.top + Dom.height + 3}px` + this.minWidthCss = `${Dom.width}px` + } + } } + setClickHander(handler: ClickHandler) { this.clickHandler = handler; } + clearClickHander() { this.clearClickHander = null; } - init(elementId: string): void { - this.$input = document.getElementById(elementId); - //this.addDOMEvent(); - } - // input 添加监听事件 - addDOMEvent() { - // this.left = DOM.left - // this.top = DOM.top + DOM.height + 2 - // this.minWidth = DOM.width + init(inputElement: HtmlRender): void { + this.$input = inputElement + let Dom = this.$input.getBoundingClientRect() + this.leftCss = `${Dom.left + 3}px` + this.topCss = `${Dom.top + Dom.height + 3}px` + this.minWidthCss = `${Dom.width}px` } + // 触发 select select(e) { this.clearClickHander && this.clickHandler(e); this.searchList = []; } - watch() { - //TODO:修改leftCss ,topCss - } - - testAddData() { - this.searchList.push({ - name: "asfasdfasdf" - } as AutocompleteSelect); - } } \ No newline at end of file diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index ff02a4f..1471eeb 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,8 +1,5 @@ -import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch, AutocompleteSearchCallback, AutocompleteSelectCallback, PlaceSearchCallback, AutocompleteSearch } from './map' +import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch, AutocompleteSearchCallback, AutocompleteSelectCallback, PlaceSearchCallback, AutocompleteSearch, DrivingSearchCallback } from './map' import MapTools from './map-tools'; -import * as global from 'globals'; -import { SearchService } from '@src/app/searchComponent.service'; -import { SearchDownList } from './component/SearchDownListPlugins/SearchDownList'; declare var AMap: any; declare var AMapUI: any; @@ -369,8 +366,10 @@ export class GaodeDriving extends GaodeBasic implements IDriving { this.self = new AMap.Driving(options) }) } - search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) { - return this.self.search(posStart.getArray(), posEnd.getArray(), callback) + search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) { + return this.self.search(posStart.getArray(), posEnd.getArray(), (status, result)=>{ + callback.call(component,status,result) + }) } clear() { return this.self.clear() @@ -379,36 +378,20 @@ export class GaodeDriving extends GaodeBasic implements IDriving { export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { private component: any - private searchDownList: SearchDownList constructor(options: any, component: any) { super(); this.component = component AMap.plugin('AMap.AutoComplete', () => { this.self = new AMap.Autocomplete(options) }) - - this.searchDownList = global.injector.get(SearchService).appendComponentToBody(SearchDownList).instance; - this.searchDownList.init(options.input); - - this.self.on('complete', (e) => { - console.log('search complete', e); - this.searchDownList.searchList = e.tips || []; - }) } on(eventName: string, callback: AutocompleteSelectCallback) { - this.searchDownList.setClickHander(e => { - alert(e.name); - callback(e); - }); - //$().addEventListener - // return this.self.on(eventName, (event) => { - // console.log('on event', event) - // callback.call(this.component, event) - // }) + return this.self.on(eventName, (event) => { + callback.call(this.component, event) + }) } search(address: string, callback: AutocompleteSearchCallback) { - return this.self.search(address, (status, result: AutocompleteSearch) => { - this.searchDownList.searchList = result.tips || []; + return this.self.search(address, (status, result) => { callback.call(this.component, status, result) }) } diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index 0dc2c5e..8106d02 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -1,8 +1,7 @@ -import { AutocompleteSearchCallback, AutocompleteSelectCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, PlaceSearchCallback } from './map' -import * as ObjectID from 'bson-objectid'; +import { AutocompleteSearchCallback, AutocompleteSelectCallback, DrivingSearchCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, PlaceSearchCallback } from './map' import { SearchDownList } from './component/SearchDownListPlugins/SearchDownList'; -import { ApplicationRef, ComponentFactoryResolver, Injector, ReflectiveInjector } from '@angular/core'; import { SearchService } from '@src/app/searchComponent.service'; +import * as ObjectID from 'bson-objectid'; import * as global from 'globals'; declare var KMap: any; @@ -295,15 +294,17 @@ export class KedaDriving extends KedaBasic implements IDriving { //路线导航 this.map = options.map as KeDaMap options.policy === undefined ? this.policy = 0 : this.policy = options.policy } - clear() { - this.map.self.removeRoutePlanning({ id: this.id }) - } - search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) { + search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) { let params = { startPoint: posStart.getArray(), endPoint: posEnd.getArray(), error: () => { alert('路线规划失败！') }, - ended: (res) => { this.id = res.data } + ended: (res) => { + this.id = res.data + let router = { routes:[] } + console.log(res.data) + callback.call(component,'complete',router) + } } if (this.policy === 0) { //快捷模式 this.map.self.createMinDistanceRoutePlanning(params) @@ -311,27 +312,41 @@ export class KedaDriving extends KedaBasic implements IDriving { //路线导航 this.map.self.createMinTimeRoutePlanning(params) } } + clear() { + this.map.self.removeRoutePlanning({ id: this.id }) + } + } export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索 - private component: any + private component: any; + private searchDownList: SearchDownList; + private $input: any; constructor(options: any, component: any) { super(); this.component = component - const injector = Injector.create({ - providers: - [{ provide: SearchService, deps: [ComponentFactoryResolver, ApplicationRef, Injector] }] - }); - injector.get(SearchService).appendComponentToBody(SearchDownList); - if (options && options.input != undefined) { //绑定input框搜索事件 - this.inputListen(options.input); + if (options && options.input != undefined) { //绑定input框 搜索事件 + this.searchDownList = global.injector.get(SearchService).appendComponentToBody(SearchDownList).instance; + this.$input = document.getElementById(options.input); + this.searchDownList.init(this.$input) + this.$input.oninput = (e) =>{ //监听 input事件 + (this.component.map as KeDaMap).self.queryInfoByType({ + code: cityCode, + keyword: this.$input.value, + searchType: [], + callback: (res) => { + let list = res.data + this.searchDownList.searchList = list || [] + } + }) // search + } } } on(eventName: string, callback: AutocompleteSelectCallback) { - - } - inputListen(elementId: string) { - + this.searchDownList.setClickHander(e => { + console.log(e+'Keda') + callback.call(this.component,e); + }); } search(address: string, callback: AutocompleteSearchCallback) { (this.component.map as KeDaMap).self.queryInfoByType({ @@ -340,6 +355,7 @@ export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Aut searchType: [], callback: (res) => { console.log(res) + callback.call(this.component,'complete',res); } }) } @@ -351,8 +367,16 @@ export class KedaPlaceSearch extends KedaBasic implements IPlaceSearch { //Place super(); this.component = component } - search(text: string, callback: PlaceSearchCallback) { - throw new Error('Method not implemented.'); + search(address: string, callback: PlaceSearchCallback) { + (this.component.map as KeDaMap).self.queryInfoByType({ + code: cityCode, + keyword: address, + searchType: [], + callback: (res) => { + console.log(res) + callback.call(this.component,'complete',res); + } + }) } } diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 1aaa010..fcd0440 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -104,9 +104,26 @@ export interface IDrivingOptions { isOutline?: boolean } +export class DrivingSearch { //Driving Search() 数据类型 + distance: number + time: number + tolls_distance: number + steps: DrivingSearchSteps[] + routes:any[] //伪代码 +} +export class DrivingSearchSteps { //Driving Search() Steps 数据类型 + instruction:string + orientation:string + road: string + distance: number + time: number + tolls_distance: number +} + +type DrivingSearchCallback = (status:string,searchData:DrivingSearch)=>void; export interface IDriving extends ISelf { clear(); - search(posStart?: ILngLat, posEnd?: ILngLat, callback?:Function); + search(component: any,posStart: ILngLat, posEnd: ILngLat, callback:DrivingSearchCallback); } export class AutocompleteSearch { //Autocomplete Search() 数据类型