使用angular 框架 typescript 技术实现高德地图查询地点

1. 安装必要的依赖

使用 Angular 框架实现高德地图需要安装 @types/amap-js-api 和 @types/amap-js-sdk 两个依赖。

npm install @types/amap-js-api @types/amap-js-sdk --save-dev

2. 配置 highCharts API Key

在 app.module.ts 中配置高德地图的 API Key：

import { AMapLoaderService, LoaderOptions } from '@delon/theme';
// ...

const options: LoaderOptions = {
  key: '你的高德地图 API Key',
};

// ...

@NgModule({
  imports: [
    // ...
  ],
  declarations: [
    // ...
  ],
  providers: [
    // ...
    AMapLoaderService,
    {
      provide: 'DA_STORE_TOKEN',
      useValue: {},
    },
    {
      provide: 'HIGHCHARTS_MODULES',
      useFactory: () => [more, exporting],
    },
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [highcharts],
    }
  ],
})
export class AppModule {}

3. 创建地图的 wrapper 服务类

我们需要创建一个 wrapper 类，封装高德地图的调用，以便在内部进行维护和扩展。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MapService {
  private AMap: any;

  constructor() {
    this.loadMapScript();
  }

  private loadMapScript() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${environment.amapApiKey}&callback=initAMap`;

    script.onerror = () => {
      console.error('Could not load map script!');
    };

    document.body.appendChild(script);
  }

  public getMapInstance() {
    return new Promise<any>((resolve, reject) => {
      if (this.AMap) {
        resolve(this.AMap);
      } else {
        const callbackName = `initAMap${Math.floor(Math.random() * 10000)}`;
        window[callbackName] = () => {
          this.AMap = window.AMap;
          resolve(this.AMap);
          delete window[callbackName];
        };
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${environment.amapApiKey}&callback=${callbackName}`;

        script.onerror = () => {
          console.error('Could not load map script!');
          delete window[callbackName];
          reject();
        };

        document.body.appendChild(script);
      }
    });
  }
}

在上面的代码中，我们加载了高德地图 SDK 并在异步加载结束后返回 AMap 实例。

4. 在组件中使用地图查询服务

现在我们可以在组件中使用地图查询服务了。让我们创建一个 search.component.ts 文件实现这个服务。

import { Component, OnInit } from '@angular/core';
import { MapService } from '../services/map.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  constructor(private mapService: MapService) {}

  ngOnInit() {}

  searchPlace(query: string) {
    this.mapService.getMapInstance().then(AMap => {
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 10,
        pageIndex: 1,
        city: '全国',
        map: new AMap.Map('map', {
          zoom: 15,
          resizeEnable: true,
        }),
        panel: 'panel'
      });

      placeSearch.search(query, function (status: any, result: any) {
        // 处理查找结果
      });
    });
  }
}

这里我们定义了一个 `searchPlace` 方法，用来查询地点。当我们调用 `searchPlace(query)` 的时候，它将使用 `MapService` 实例来获取 AMap 实例，然后使用 AMap 的 `PlaceSearch` 类查询地点。

5. 在 HTML 模板中添加搜索输入框和地图

最后，我们将在 HTML 模板中创建搜索输入框和地图。

<div class="search-container">
  <input type="text" [(ngModel)]="searchQuery" placeholder="请输入地点名称">
  <button (click)="searchPlace(searchQuery)">搜索</button>
</div>

<div id="map" style="height: 400px;"></div>
<div id="panel"></div>

现在我们已经实现了一个简单的搜索地点页面，它可以通过高德地图查询地点并在地图上展示出来。