javascript - 使用 Aurelia 的谷歌地图

Question

我正在使用 Aurelia ，我想用谷歌地图渲染一张基本 map 。

我尝试了 Aurelia-Google-Maps ( https://github.com/Vheissu/aurelia-google-maps )，但就是无法正常工作(一切正常加载，但我模板上的 <google-map> 元素未呈现为 map )。我现在正在尝试使用 Google-Map-API ，所以我可以很好地加载所有内容，创建一个 Map 对象，但是当我尝试添加属性时，出现错误:

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

我完全看不出我的错误在哪里。

这是我的代码(accueil.js——一个 Controller )

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

我们已经有一个运行 Aurelia 的生产站点，其中嵌入了 Google map (https://farmtracksa.com)，目前正在使用我们自己的组件来管理在页面中嵌入 Google map (并通过 DI 将 map 公开到我们页面的其余部分)和组件)。

我们的网站是用 TypeScript 编写的，我们的 Google map 控件被分解为服务和组件，如下所示:

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

还有控件，您可以将其嵌入到 View 中。

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

然后您可以将其嵌入到如下 View 中:

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

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

最后，您还需要确保将 Google Maps API 加载到您的网络应用程序中。我通过在我的 index.html 文件中放置以下代码片段(来自 Google Maps Docs )来完成此操作，因为我在整个应用程序中都使用了 map 。

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

在尝试初始化页面上的 GoogleMaps 元素之前，您需要确保已加载 Google Maps 脚本，否则会导致您的开发控制台出错。