使用 Angular 2 连接 Google Maps Nativescript 插件 [英] Wiring up Google Maps Nativescript plugin with Angular 2
问题描述
我正在尝试将 Google 地图插件用于 Nativescript (https://github.com/dapriett/nativescript-google-maps-sdk) 与 Angular 2 和 {N}-Angular 路由器.我只在 Nativescript 中使用它,但是一旦我添加了 Angular 2 和路由器,我就无法让地图显示在 UI 中.
I'm trying to use the Google Maps plugin for Nativescript (https://github.com/dapriett/nativescript-google-maps-sdk) with Angular 2 and the {N}-Angular router. I have it working in just Nativescript but once I add in Angular 2 and the router I'm failing to get the map to show up in the UI.
由于
标签没有进入 Angular2 {N} 组件模板,我不能使用 xmlns:maps="nativescript-google-maps-
命名空间,用于实例化
上的 sdk"
Since a <Page>
tag doesn't go into an Angular2 {N} component template, I can't use the xmlns:maps="nativescript-google-maps-sdk"
namespace on the <Page>
to instantiate the <maps:mapView>
{N} 组件基础页面提供了一些指导,但它在我尝试过的方式中不起作用:https://docs.nativescript.org/ui/ui-with-xml#user-interface-components
The {N} component basics page gives some guidance but it doesn't work in the ways I've tried: https://docs.nativescript.org/ui/ui-with-xml#user-interface-components
知道正确的方法吗?
app.component.ts
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
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
标签名称,例如:
You need to register the mapView
tag name with the element-registry
API e.g.:
该 API 尚未记录在案,但我们应该在未来几周内解决该问题.
That API isn't documented yet, but we should fix that problem in the coming weeks.
这篇关于使用 Angular 2 连接 Google Maps Nativescript 插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!