尝试使用添加到 Angular Material 中的 google-maps

1 年 ago
韵, 科
3 minutes

我正在开发一个使用Google地图的Angular应用程序。

在调查适用于我这种对Angular经验较浅的人也能轻松使用的GoogleMap库时，最近，我发现了@angular/google-maps components/src/google-maps at master · angular/components · GitHub，它作为Angular Material UI组件库的一个包被发布了，所以我立即尝试进行验证和测试。

在这篇文章中，我们将介绍如何简单地使用@angular/google-maps 。

安装和设置

从npm进行安装。

$ npm i @angular/google-maps

安装完成后，导入 GoogleMapsModule。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { GoogleMapsModule } from "@angular/google-maps";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, GoogleMapsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

地图 JavaScript API 的设置

为了使用Maps JavaScript API，在index.html中添加以下script标签。有关获取API密钥的方法，请参阅此处。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GoogleMapExample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
  type="text/javascript"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

以上就完成了设置。

可以使用的组件

目前，GoogleMapsModule 导出了以下三个组件。

GoogleMap

google.maps.Map クラス をラップしているコンポーネント。地図の描画や操作ができる。`

MapMarker

google.maps.Marker クラス をラップしているコンポーネント。マーカーの設置、操作ができる。

MapInfoWindow (この記事では触れていません。)

google.maps.InfoWindow クラス を ラップしているコンポーネント.

通过将它们结合起来，您可以轻松地将谷歌地图集成到 Angular 应用程序中。

展示地图

我們立即在應用程式中顯示地圖。
GoogleMap元件有以下定義的 @Input 屬性。

    • zoom : 地図のズームレベル

 

    • center : 地図の中心座標

 

    • width : 地図の横幅

 

    • height : 地図の高さ

 

    options : その他のオプションgoogle.Maps.MapOptions インターフェースで定義されているオプションを指定できる。

使用此属性，我们将以东新宿车站为中心来显示地图。

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  zoom = 16;
  // 東新宿駅の座標
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  // 地図のオプション
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };

  constructor() {}

  ngOnInit() {}
}

在模板中只需要添加 。

<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
></google-map>
スクリーンショット 2019-12-07 18.42.57.png

显示标记笔

使用MapMarker组件来在地图上显示标记。
让我们尝试获取当前位置，并将其显示为自定义图像的标记。

您可以在MapMarker的options属性中设置与google.maps.MarkerOptions接口定义的值相匹配的值。

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  zoom = 16;
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };

  // 現在位置マーカーの座標
  currentPosition: google.maps.LatLngLiteral;
  // 現在位置マーカーのオプション
  currentPositionMarkerOption: google.maps.MarkerOptions = {
    icon: {
      url: "assets/point.png",
      scaledSize: new google.maps.Size(32, 32)
    }
  };

  constructor() {}

  ngOnInit() {
    // 現在位置を取得する。
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.currentPosition = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
}

在模板中，放置 。

<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
>
  <map-marker
    *ngIf="currentPosition"
    [position]="currentPosition"
    [options]="currentPositionMarkerOption"
  >
  </map-marker>
</google-map>
スクリーンショット 2019-12-07 18.24.37.png

从父组件操控地图

要从父组件访问 GoogleMap 组件的 API，需要使用 @ViewChild 装饰器。

以下是一个示例，当点击当前位置标记时，将平滑地将相机移动到标记的坐标。

import { Component, OnInit, ViewChild } from "@angular/core";
import { GoogleMap, MapMarker } from "@angular/google-maps";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  // GoogleMap コンポーネントへの参照を得る.
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  zoom = 16;
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };
  currentPosition: google.maps.LatLngLiteral;
  currentPositionMarkerOption: google.maps.MarkerOptions = {
    icon: {
      url: "assets/point.png",
      scaledSize: new google.maps.Size(32, 32)
    }
  };

  constructor() {}

  ngOnInit() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.currentPosition = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }

  // 現在位置マーカーがクリックされた時のハンドラー
  onCurrentPositionMarkerClick(marker: MapMarker) {
    // 地図をマーカーの座標までパンさせる。
    this.map.panTo(marker.getPosition());
  }
}

模板

<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
>
  <map-marker
    #markerElem
    *ngIf="currentPosition"
    [position]="currentPosition"
    [options]="currentPositionMarkerOption"
    (mapClick)="onCurrentPositionMarkerClick(markerElem)"
  >
  </map-marker>
</google-map>

截图

ezgif-2-59ca5efc08b5.gif

总结

我发现使用 @angular/google-maps 可以在Angular应用程序中非常轻松地显示和操作Google地图。

因为即使是对 Angular 经验较浅的我也能轻而易举地实现我想要的功能，所以如果您打算创建一个使用 GoogleMap 的 Angular 应用程序，我建议您考虑使用一次。

另外，如果您想创建更复杂的地图应用程序，建议根据要求选择使用AngularGoogleMaps(AGM) Angular 2+ Google Maps Components这个非常出色的第三方库。

✖
广告
将在 10 秒后关闭
bannerAds