Как загрузить google maps javascript api в приложении Aurelia javascript?

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

Я получаю следующее сообщение об ошибке в консоли браузера:

ПОЛУЧИТЬ https://localhost:44308/app/dist/google-maps-api.js 404 (не найдено)

Глядя на файловую систему I см., что npm установил модуль под app/node_modules/google-maps-api, так как я могу ссылаться на него в предложении import из модуля Aurelia?

Answer 1

Я нашел решение и ответить на мой собственный вопрос здесь:

Я, наконец, понял, как установить его с JSPM, так что вам просто нужно дать подсказку JSPM установить его из НПМ, как так:

JSPM установить НПМ: Google-карты-апи

После 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 подписаться на маршрутизатор: навигация: полные события и использовать 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() ссылку на ваш взгляд.

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

Для всех, кто использует машинопись и получить «Не удается найти модуль" Google-карты-API»ошибка, вам нужно добавить типизации к раствору. Нечто подобное работает

declare module 'google-maps-api' { 

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

    namespace mapsapi { 
    } 

    export = mapsapi; 
} 

, а затем импортировать его как этот

import * as mapsapi from 'google-maps-api';