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

我在浏览器控制台中收到以下错误：

获取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';

然后我将它注入构造函数并实例化geocoder 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 回答