使用 Angular 2 连接 Google Maps Nativescript 插件答案

【问题标题】：Wiring up Google Maps Nativescript plugin with Angular 2使用 Angular 2 连接 Google Maps Nativescript 插件
【发布时间】：2016-04-06 06:46:02
【问题描述】：

我正在尝试将 Google Maps 插件用于 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-interface-components

有什么正确的方法吗？

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) { }
}

【问题讨论】：

事件 (cameraChanged) 和 (markerSelect) 在上述代码中是否有效？因为他们似乎在这里不起作用..
不，它们在 Angular 2 设置中似乎不像在普通的 Nativescript 示例中那样工作。我发现您可以在组件中的 MapView 对象本身上以编程方式设置它们以使它们工作。我已经开始基于此构建示例项目，但仍有一些问题，但您可以使用代码示例：Nativescript Maps App

标签： typescript angular angular2-routing nativescript

【解决方案1】：

您需要使用element-registry API 注册mapView 标签名称，例如：

https://github.com/NativeScript/nativescript-angular/blob/master/src/nativescript-angular/element-registry.ts#L70-L105

该 API 尚未记录在案，但我们应该在未来几周内解决该问题。

【讨论】：

谢谢，工作就像一个魅力。对于遇到此问题的其他任何人，我添加到 home.component.ts 以使 UI 标记工作的代码是：import {registerElement} from 'nativescript-angular/element-registry'; registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView);

【解决方案2】：

我发现使用这个插件和 ns angualr 2 我不得不手动将 applicationID 添加到 root/platforms/adnroid 下的 build.gradle 文件中：

android{
    defaultConfig{
        applicationId "org.nativescript.my_app_name"

这是在我使用 tns 插件添加 nativescript-google-sdk 之后。

否则应用程序构建成功，但部署时不会安装在设备或模拟器上并检查 logcat，我觉得这很奇怪，因为 nativescript 不会让你编辑 build.gradle 文件。现在使用其他答案的代码效果很好

【讨论】：