Typescript 用Angular 2连接Google Maps Nativescript插件

我正在尝试将GoogleMaps插件用于Nativescript（）和Angular 2以及{N}-Angular路由器。我只在Nativescript中使用它，但一旦我添加Angular 2和路由器，我就无法在UI中显示地图

由于

标记没有进入Angular2{N}组件模板，因此我无法使用

上的

xmlns:maps=“nativescript google maps sdk”

命名空间来实例化

{N}组件基本知识页面提供了一些指导，但它不能以我尝试过的方式工作：

有没有关于正确的方法的想法

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

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

---

您需要在

元素注册表

API中注册

mapView

标记名，例如：

---

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

我发现，在ns angualr 2中使用此插件时，我必须手动将applicationID添加到根/platforms/adnroid中的build.gradle文件中，具体如下：

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

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

---

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

谢谢，效果很好。对于遇到此问题的任何其他人，我添加到home.component.ts以使UI标记工作的代码是：

import{registerement}from'nativescript angular/element registry'；registerElement（“MapView”，（）=>require（“nativescript谷歌地图sdk”）.MapView）事件（cameraChanged）和（markerSelect）是否在上述代码中工作？因为它们在这里似乎不起作用..不，它们在Angular 2设置中似乎不像在plain Nativescript示例中那样起作用。我发现您可以在组件中的MapView对象本身上以编程方式设置它们，以使它们正常工作。我已经开始基于此构建一个示例项目，仍然存在一些问题，但您可以使用代码示例：
android{
    defaultConfig{
        applicationId "org.nativescript.my_app_name"