谷歌地图使用Aurelia

Question

我使用的是Aurelia，我想使用Google地图渲染基本地图。我尝试了Aurelia-Google-Maps（https://github.com/Vheissu/aurelia-google-maps），但无法使其正常工作（一切正常，但我的模板上的<google-map>元素未呈现为地图）。 我现在试图用Google-Map-API，所以我可以加载一切就好了，创建一个Map对象，但是当我尝试添加属性，我得到一个错误：

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

一个问题，我可以看到直线上升是您试图从你的谷歌地图添加其中的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

我们已经得到了生产现场进行运行奥里利亚嵌入谷歌地图（https://farmtracksa.com）和目前正在使用我们自己的组件来管理在页面中嵌入Google地图（并通过DI将地图展示给我们的其他页面和组件）。

我们的网站是写了在打字稿，我们的谷歌地图的控制被分解成服务和组件，如下所示：

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到你的Web应用程序。我通过在我的index.html文件中放置以下片段（来自Google Maps Docs）来完成此操作，因为我在整个应用程序中使用了地图。

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

你要确保你尝试之前，你的页面上初始化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>