我已经创建了ionic 2
应用RC0
,我想在我的应用中创建地图。
第一步:
使用CLI命令行添加Google Maps插件
ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
Seconde Step:
添加所有功能,我的代码是:
import { Component } from '@angular/core';
import { NavController , Platform } from 'ionic-angular';
import { MonzaData } from '../../providers/monza-data';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class Map {
map: GoogleMap;
constructor(public navCtrl: NavController, public platform: Platform) {
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
let location = new GoogleMapsLatLng(-34.9290,138.6010);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
});
}
}
最终:
使用ionic run ios
运行应用,但出现了错误:
** BUILD FAILED **
The following build commands failed:
CompileC build/monza.build/Debug-iphonesimulator/monza.build/Objects-normal/x86_64/GoogleMaps.o monza/Plugins/plugin.google.maps/GoogleMaps.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/path/monza/platforms/ios/cordova/build-debug.xcconfig,-project,monza.xcodeproj,-target,monza,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,build,CONFIGURATION_BUILD_DIR=/path/monza/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/imac/Desktop/data mac/desktop/imac-MBackUp/monza/platforms/ios/build/sharedpch
[Warning] Native: tried accessing the undefined plugin but it's not installed. (console-via-logger.js, line 173)
[Warning] Install the undefined plugin: 'ionic plugin add cordova-plugin-googlemaps' (console-via-logger.js, line 173)
离子信息:
Cordova CLI: 6.3.1
Gulp version: CLI version 1.2.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175