Google Maps Использование Aurelia

Question

Я использую Aurelia, и я бы хотел отобразить основную карту с помощью Google Maps.

Я попробовал Aurelia-Google-Maps (https://github.com/Vheissu/aurelia-google-maps), но просто не мог заставить его работать (все нормально загружалось, но элементы <google-map> на моем шаблоне не отображались в виде карты). Я сейчас пытаюсь использовать Google-Map-API, так что я могу загрузить все просто отлично, создать объект на карте, но когда я пытаюсь добавить свойства, я получаю сообщение об ошибке:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 

Я вовсе не видеть, где мой ошибка приходит.

Вот мой код (accueil.js - контроллер)

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

@inject(mapsapi('myApiKey')) 

export class Accueil { 
    constructor(mapsapi) { 
     mapsapi.then(function(maps) { 
      var map = new maps.Map((document.getElementById('map'), { 
       center: {lat: -34.397, lng: 150.644}, // just random values 
       zoom: 8 
      })); // doesn't work 
     }); 
    } 
} 

Спасибо большое,

Answer 1

Один вопрос, который я могу видеть прямо есть вы пытаетесь добавить в ваш Google Map из в функции constructor, которая в основном выполняется до того, как DOM правильно загрузил и готов к запуску скриптов.

Попробуйте переместить код в attached метод, который увольняет, когда DOM готов мутировать вместо:

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

@inject(mapsapi('myApiKey')) 

export class Accueil { 
    mapsapi; 

    constructor(mapsapi) { 
     this.mapsapi = mapsapi; 
    } 

    attached() { 
     this.mapsapi.then(function(maps) { 
      var map = new maps.Map((document.getElementById('map'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 8 
      })); 
     }); 
    } 
} 

Answer 2

Мы получили производственную площадку, бегая Aurelia с внедренным Google Maps (https://farmtracksa.com) и в настоящее время используют наш собственный компонент для управления вложением Карт Google на странице (и отображения карты через DI на остальные наши страницы и компоненты).

Наш сайт написан на машинопись и наш контроль Google Maps разбивается на службу и компонентов, а именно:

import { autoinject } from "aurelia-framework"; 

@autoinject 
export class GoogleMaps { 
    constructor() { 
    this.initialized = new Promise<void>((resolve, reject) => { 
     this.onInitialized = resolve; 
     this.onInitializationFailed = reject; 
    }); 
    } 

    map: google.maps.Map = null; 

    initialized: PromiseLike<void>; 
    private onInitialized:() => void; 
    private onInitializationFailed: (err: Error) => void; 

    initialize(element: Element) { 
    this.map = new google.maps.Map(element, {}); 

    this.onInitialized(); 
    } 
} 

И контроль, который можно встроить в ваш взгляд.

import {bindable, autoinject, inlineView, bindingMode, customElement, 
inject} from "aurelia-framework"; 
import {DOM} from "aurelia-pal"; 

@inlineView("<template></template>") 
@bindable({ 
    name: "zoom", 
    changeHandler: "onZoomChanged", 
    defaultBindingMode: bindingMode.twoWay, 
    defaultValue: 17 
}) 
@bindable({ 
    name: "latitude", 
    changeHandler: "onCenterChanged", 
    defaultBindingMode: bindingMode.twoWay, 
    defaultValue: -34.1996316 
}) 
@bindable({ 
    name: "longitude", 
    changeHandler: "onCenterChanged", 
    defaultBindingMode: bindingMode.twoWay, 
    defaultValue: 19.0268722 
}) 
@customElement("google-maps") 
@inject(DOM.Element, GoogleMaps) 
export class GoogleMapsControl { 
    static map: google.maps.Map = null; 

    constructor(private mapElement: Element, public googleMaps: GoogleMaps) { 

    } 

    bind() { 

    } 

    attached() { 
    this.googleMaps.initialize(this.mapElement); 

    this.googleMaps.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude)); 
    this.googleMaps.map.setZoom(this.zoom); 
    this.onCenterChanged(); 
    } 

    changing = false; 

    zoom = 17; 
    latitude = -34.1996316; 
    longitude = 19.0268722; 

    onZoomChanged() { 
    this.googleMaps.map && this.googleMaps.map.setZoom(this.zoom); 
    } 

    onCenterChanged() { 
    this.googleMaps.map && this.latitude && this.longitude && this.googleMaps.map.setCenter({ lat: this.latitude, lng: this.longitude }); 
    } 
} 

Вы бы затем вставлять его в представлении, как это:

<template> 
    <require from="./google-maps"></require> 

    <google-maps zoom="7"></google-maps> 
</template> 

Наконец, вы также должны убедиться, что вы загрузки API Карт Google в вашем веб-приложение. Я выполнил это, разместив следующий фрагмент (от Google Maps Docs) в моем index.html файле, так как я использовал карты во всем приложении.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> 

Вы хотите, чтобы убедиться, что скрипт Google Maps был загружен, прежде чем пытаться инициализировать GoogleMaps элемент на странице, неспособность сделать это приведет к ошибкам в вашей консоли разработчика.

Answer 3

Попробуйте этот путь

• Accueil.js

  import {inject} from 'aurelia-framework'; 
  import mapsapi from 'google-maps-api'; 
  
  @inject(mapsapi('your-key')) 
  
  export class Accueil{ 
      constructor(mapsapi) { 
      this.mapsLoadingPromise = mapsapi.then(maps =>{ 
       this.maps = maps; 
      }) 
      } 
  
      attached() { 
       this.mapsLoadingPromise.then(() =>{ 
        new this.maps.Map(document.getElementById('map'), { 
        center: {lat: 39.8282, lng: -98.5795}, 
        zoom: 15 
       }); 
      }); 
      } 
  } 
  

• Accueil.HTML

  <template> 
      <div id="map"></div> 
  </template>