3

npm モジュール google-maps-api を見つけてインストールしましたが (npm install google-maps-api)、systemjs/jspm でインポートする方法がわかりません (jspm はこのモジュールを見つけることができません)。私のconfig.jsからの構成は次のとおりです。

"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }

だから、私がこのようなことをしようとすると：

import {mapsapi} from 'google-maps-api';

ブラウザ コンソールに次のエラーが表示されます。

GET https://localhost:44308/app/dist/google-maps-api.js 404 (見つかりません)

ファイルシステムを見ると、npm が app/node_modules/google-maps-api の下にモジュールをインストールしたことがわかります。Aurelia モジュールの import 句でそれを参照するにはどうすればよいですか?

4

3 に答える 3

6

私は解決策を見つけ、ここで自分の質問に答えました：

私は最終的にjspmでインストールする方法を考え出したので、次のようにjspmにヒントを与えてnpmからインストールするだけです:

jspm インストール npm:google-maps-api

jspm のインストールが完了すると、インポート ({} 構文なし) が正常に機能します。

import mapsapi from 'google-maps-api';

次に、コンストラクターに挿入し、ジオコーダー API をインスタンス化します。

@inject(mapsapi('InsertYourGMAPIKeyHere'))
export class MyClass {         
    constructor(mapsapi) {
        let that = this;
        let maps = mapsapi.then( function(maps) {
            that.maps = maps;
            that.geocoder = new google.maps.Geocoder();
        });
...
}

div でマップを作成するために、EventAggregator を使用して router:navigation:complete イベントをサブスクライブし、setTimeout を使用してマップの作成をスケジュールします。

        this.eventAggregator.subscribe('router:navigation:complete', function (e) {
        if (e.instruction.fragment === "/yourRouteHere") { 
            setTimeout(function() {
                that.map = new google.maps.Map(document.getElementById('map-div'),
                {
                    center: new google.maps.LatLng(38.8977, -77.0366),
                    zoom: 15
                });
            }, 200);
        }
    });
于 2015-06-30T18:55:02.510 に答える
6

attached()ビューへのリンクに使用する完全なビューモデルの例を次に示します。

import {inject} from 'aurelia-framework';
import mapsapi from 'google-maps-api';

@inject(mapsapi('your map key here'))

export class MapClass {

    constructor(mapsAPI) {

        this.mapLoadingPromise = mapsAPI.then(maps => {
            this.maps = maps;
        });
    }

    attached() {

        this.mapLoadingPromise.then(() => {

            var startCoords = {
                lat:  0,
                long: 0
            };

            new this.maps.Map(document.getElementById('map-div'), {
                center: new this.maps.LatLng(startCoords.lat, startCoords.long),
                zoom:   15
            });
        });
    }
}
于 2015-08-11T21:07:39.743 に答える
2

Typescript を使用して「モジュール 'google-maps-api' が見つかりません」というエラーが発生する場合は、ソリューションにタイピングを追加する必要があります。このようなものが機能します

declare module 'google-maps-api' {

    function mapsapi(apikey: string, libraries?, onComplete?);

    namespace mapsapi {
    }

    export = mapsapi;
}

そして、このようにインポートします

import * as mapsapi from 'google-maps-api';
于 2016-07-20T15:26:22.650 に答える