Подключение плагина Google Maps Nativescript к Angular 2

Я пытаюсь использовать плагин Google Maps для Nativescript (https://github.com/dapriett/nativescript-google-maps-sdk) с Angular 2 и маршрутизатором {N} -Angular. У меня он работает только в Nativescript, но как только я добавляю Angular 2 и маршрутизатор, мне не удается отобразить карту в пользовательском интерфейсе.

Поскольку тег <Page> не входит в шаблон компонента Angular2 {N}, я не могу использовать пространство имен xmlns:maps="nativescript-google-maps-sdk" в <Page> для создания экземпляра <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) { }
}

person Nick    schedule 06.04.2016    source источник
comment
Работают ли события (cameraChanged) и (markerSelect) в приведенном выше коде? потому что они, похоже, здесь не работают ..   -  person Denko Mancheski    schedule 22.05.2016
comment
Нет, похоже, они не работают в настройке Angular 2, как в простом примере Nativescript. Я обнаружил, что вы можете программно установить их в самом объекте MapView в компоненте, чтобы заставить их работать. Я начал создавать образец проекта на основе этого, все еще есть некоторые проблемы, но вы можете использовать образец кода для этого: Приложение Nativescript Maps   -  person Nick    schedule 26.05.2016


Ответы (2)


Вам необходимо зарегистрировать имя тега mapView в element-registry API, например:

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

Этот API еще не задокументирован, но мы должны исправить эту проблему в ближайшие недели.

person Hristo Deshev    schedule 11.04.2016
comment
Спасибо, сработало как шарм. Для всех, кто столкнулся с этой проблемой, код, который я добавил на home.component.ts, чтобы заставить работать теги пользовательского интерфейса, был: import {registerElement} from 'nativescript-angular/element-registry'; registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView); - person Nick; 16.04.2016

Я обнаружил, что, используя этот плагин с ns angualr 2, мне пришлось вручную добавить applicationID в файл build.gradle в root / platform / adnroid в:

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

Это было после того, как я использовал плагин tns add nativescript-google-sdk.

В противном случае приложение создавалось успешно, но при развертывании не могло устанавливаться на устройстве или эмуляторе и проверять logcat, я нахожу это странным, поскольку nativescript никогда не заставит вас редактировать файл build.gradle. Теперь он отлично работает, используя код из другого ответа

person Mark Farrell    schedule 16.06.2016