如何在 Aurelia javascript 应用程序中加载 google 地图 javascript api？

Question

我找到了 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 (Not Found)

查看文件系统，我看到 npm 在 app/node_modules/google-maps-api 下安装了模块，那么如何在 Aurelia 模块的导入子句中引用它？

Answer 1

我在这里找到了解决方案并回答了我自己的问题：

我终于想通了如何用 jspm 安装它，所以你只需要给 jspm 一个提示就可以像这样从 npm 安装它：

jspm install 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);
        }
    });

Answer 2

这是一个完整的视图模型示例，它在您的视图中使用 attached() 到 link。

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

Answer 3

对于使用 Typescript 并收到 "Cannot find module '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';

如何在 Aurelia javascript 应用程序中加载 google 地图 javascript api？

How to load google maps javascript api in Aurelia javascript application?

google-maps-api-3

node.js

systemjs

aurelia

jspm