1. 安装必要的依赖
使用 Angular 框架实现
高德地图需要安装 @types/amap-js-
api 和 @types/amap-js-sdk 两个依赖。
```bash
npm install @types/amap-js-
api @types/amap-js-sdk --save-dev
```
2. 配置 highCharts
API Key
在 app.module.ts 中配置
高德地图的
API Key：
```typescript
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 类，封装
高德地图的调用，以便在内部进行维护和扩展。
```typescript
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://web
api.amap.com/maps?v=1.4.15&key=${environment.amap
ApiKey}&callback=initAMap`;
script.onerror = () => {
console.error('Could not load map script!');
};
document.body.appendChild(script);
}
public getM
apInstance() {
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://web
api.amap.com/maps?v=1.4.15&key=${environment.amap
ApiKey}&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 文件实现这个服务。
```typescript
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.getM
apInstance().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 模板中创建搜索输入框和地图。
```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>
```
现在我们已经实现了一个简单的搜索地点页面，它可以通过
高德地图查询地点并在地图上展示出来。
文章讨论了在Chrome浏览器中使用高德地图API定位的问题，指出可能是浏览器本身的问题，Edge浏览器表现正常。作者提到通过更改谷歌浏览器配置解决了定位问题，但强调了不安全因素。
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
