我正在尝试使用Nativescript的谷歌地图插件(https://github.com/dapriett/nativescript-google-maps-sdk)使用Angular 2和{N}-Angular路由器。我只在Nativescript中使用它,但一旦我添加了Angular 2和路由器,我就无法在UI中显示地图。
由于<Page>
标签没有进入Angular2{N}组件模板,因此我不能使用<Page>
上的xmlns:maps="nativescript-google-maps-sdk"
命名空间来实例化<maps:mapView>
{N}组件基础页面提供了一些指导,但它并没有以我尝试过的方式工作:https://docs.nativescript.org/ui/ui-with-xml#user-接口组件
你知道做这件事的正确方法吗?
app.component.ts
import {Component} from "angular2/core";
import {RouteConfig} from "angular2/router";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {HomeComponent} from "./pages/home/home.component";
@Component({
selector: "app-main",
directives: [NS_ROUTER_DIRECTIVES],
providers: [NS_ROUTER_PROVIDERS],
template: "<page-router-outlet ></page-router-outlet>"
})
@RouteConfig([
{ path: "/home", component: HomeComponent, as: "Home", useAsDefault: true },
])
export class AppComponent {
}
home.html
<stack-layout orientation="vertical">
<label [text]="message"></label>
<mapView [latitude]="latitude" [longitude]="longitude"
[zoom]="zoom" [bearing]="bearing"
[tilt]="tilt" (mapReady)="OnMapReady"
(markerSelect)="onMarkerSelect"
(cameraChanged)="onCameraChanged">
</mapView>
</stack-layout>
home.component.ts
import {Component} from "angular2/core";
var geolocation = require("nativescript-geolocation");
var mapsModule = require("nativescript-google-maps-sdk");
exports.mapView = mapsModule.MapView; //Doesn't work
exports.mapView = new mapsModule.MapView(); //Doesn't work
exports.mapView = mapsModule; //Doesn't work
@Component({
selector: "home",
templateUrl: "pages/home/home.html",
})
export class HomeComponent {
public message:string = "Message set.";
public latitude:number = 30.0;
public longitude:number = -100.0;
public zoom:number = 10;
public bearing:number = 0;
public tilt:number = 0;
constructor() {
this.message = "Home constructed.";
}
OnMapReady(args) { }
onMarkerSelect(args) { }
onCameraChanged(args) { }
}
您需要向element-registry
API注册mapView
标签名称,例如:
https://github.com/NativeScript/nativescript-angular/blob/master/src/nativescript-angular/element-registry.ts#L70-L105
API还没有文档,但我们应该在未来几周内解决这个问题。
我发现在ns-angualr 2中使用这个插件时,我必须手动将applicationID添加到root/platforms/adroid下的build.gradle文件中:
android{
defaultConfig{
applicationId "org.nativescript.my_app_name"
这是在我使用tns插件添加nativescript-google-sdk之后。
否则,该应用程序构建成功,但在部署时不会安装在设备或模拟器上,并检查logcat,我觉得这很奇怪,因为nativeescapet永远不会让你编辑build.gradle文件。现在使用其他答案的代码效果很好