autocomplate封装完成

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]

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]

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<T>(component: any): ComponentRef<T> {
         //create a component reference
         const componentRef = this.componentFactoryResolver.resolveComponentFactory(component).create(this.injector);
@@ -21,6 +21,7 @@ export class SearchService {
         return componentRef as ComponentRef<T>;
     }
 
+    //删除组件
     removeComponentFromBody(componentRef: ComponentRef<any>) {
         this.applicationRef.detachView(componentRef.hostView);
         componentRef.destroy();

src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html

@@ -1,4 +1,3 @@
 <div class="content" [ngStyle]="{'left': leftCss,'top': topCss,'min-width': minWidthCss}" *ngIf="searchList.length">
-    <h1>I'm loaded</h1>
     <div *ngFor="let item of searchList" (click)="select(item)" class="item">{{item.name}}</div>
 </div>

src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss

@@ -12,5 +12,5 @@
     padding: 4px;
 }
 .item:hover {
-    background-color: #007aff;
+    background-color: #7fb9f7;
 }

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);
-    }
 }

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>(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)
         })
     }

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>(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>(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);
+            }
+        })
     }
 }
 

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() 数据类型