Question

我正在尝试使用带有Angular 2和{N} -Angular路由器的Nativescript（https://github.com/dapriett/nativescript-google-maps-sdk）的Google Maps插件。我只使用Nativescript，但是一旦我添加Angular 2和路由器，我就无法让地图显示在UI中。

由于https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=28.4573585,77.0332349&radius=2000&key=AIzaSyByyUldmVJqsrB_yYGlVzWF92des4DbsZ0标记未进入Angular2 {N}组件模板，因此我无法使用<Page>上的xmlns:maps="nativescript-google-maps-sdk"命名空间来实例化<Page> }

{N}组件基础知识页面提供了一些指导，但它并没有按照我尝试的方式运行：https://docs.nativescript.org/ui/ui-with-xml#user-interface-components

有关正确方法的任何想法都是？

app.component.ts

<maps:mapView>

home.html的

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.component.ts

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

Answer 1

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

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

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

Answer 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文件。现在使用其他答案的代码

可以很好地工作

使用Angular 2连接Google Maps Nativescript插件

2 个答案: