要在
Ionic-Angular 项目中
使用高德地图的
Android Key，你需要进行以下步骤：
1. 在你的项目中安装
Cordova 插件
cordova-plugin-amap，可以
使用以下
命令进行安装：
```
cordova plugin add
cordova-plugin-amap --variable
ANDROID_KEY=YOUR_
ANDROID_KEY
```
其中，YOUR_
ANDROID_KEY 是你在高德开发者平台注册应用时获取到的
Android Key。
2. 在你的
Ionic-Angular 项目中创建一个名为 amap.html 的文件，并在其中添加以下代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图</title>
<script src="http://webapi.amap.com/maps?v=1.4.14&key=YOUR_
ANDROID_KEY"></script>
<style type="text/css">
#container {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
zoom: 10,
center: [116.39, 39.9]
});
</script>
</body>
</html>
```
在上面的代码中，将 YOUR_
ANDROID_KEY 替换为你在高德开发者平台注册应用时获取到的
Android Key。
3. 在你的
Ionic-Angular 项目中创建一个名为 amap.ts 的文件，并在其中添加以下代码：
```
import { Component } from '@angular/core';
import { NavController } from '
ionic-angular';
@Component({
selector: 'page-amap',
templateUrl: 'amap.html'
})
export class AmapPage {
constructor(public navCtrl: NavController) {
}
}
```
在上面的代码中，我们创建了一个名为 AmapPage 的组件，并将其关联到 amap.html 文件。
4. 在你的
Ionic-Angular 项目中创建一个名为 app.module.ts 的文件，并在其中添加以下代码：
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {
IonicModule } from '
ionic-angular';
import { AmapPage } from './amap';
@NgModule({
declarations: [
AmapPage
],
imports: [
BrowserModule,
IonicModule.forRoot(AmapPage)
],
bootstrap: [
IonicApp],
entryComponents: [
AmapPage
],
providers: []
})
export class AppModule {}
```
在上面的代码中，我们将 AmapPage 组件添加到了 AppModule 中，并将其作为
Ionic App 的启动模块。
5. 最后，在你的
Ionic-Angular 项目中创建一个名为 app.component.ts 的文件，并在其中添加以下代码：
```
import { Component } from '@angular/core';
import { Platform } from '
ionic-angular';
import { AmapPage } from './amap';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = AmapPage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Do any necessary
cordova or native initialization here
});
}
}
```
在上面的代码中，我们将 AmapPage 设置为
Ionic App 的根页面，并在 App 初始化时进行了一些必要的
Cordova 或原生初始化操作。
完成上述步骤后，你就可以在
Ionic-Angular 项目中
使用高德地图的
Android Key 了。
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
