如何使用带角度的谷歌地图 2+

Question

我是 Angular 新手，正在使用 Angular 2+ 进行旧项目。

由于我是新手，我很难了解地图的工作原理，如果有人请告诉我，这将是一个很大的帮助。

          <input  places-auto-complete (place_changed)="placeChange($event)" 
          [types]="['all']"  class="search" 
          [(ngModel)]="place" placeholder="Search Place"/>

我想知道places-auto-complete 是如何工作的，我找不到任何来自的类或模块，我想更改其参数，例如：

[types]="['all']" -> [types]="['address']"

我尝试更改它，但它不起作用，所以我想知道它的整个工作流程。

我们将不胜感激。

谢谢

Answer 1

您可以直接加载脚本，以便您可以使用谷歌地图的official documentations，而不是依赖第三方库/模块来为您实现地图。为此，只需在 index.html 中加载 JS 地图脚本即可。

这是一个工作示例供您参考：https://stackblitz.com/edit/angular-map-with-marker-64255628

index.html

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

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

ma​​p-with-marker.component.html

<div #map class="map"></div>

ma​​p-with-marker.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;

@Component({
  selector: "my-maps",
  templateUrl: "./map-with-marker.component.html",
  styleUrls: ["./map-with-marker.component.css"]
})
export class MapComponent implements OnInit {
  @ViewChild("map", { static: true }) mapElement: any;
  map: any;

  constructor() {}

  ngOnInit() {
    var center = { lat: -33.8569, lng: 151.2152 };
    const mapProperties = {
      center: center,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement,mapProperties);
    var marker = new google.maps.Marker({ position: center, map: this.map });

    //adding markers by click
    this.map.addListener('click', (e) =>{
        //Determine the location where the user has clicked.
        this.addMarker(e.latLng);
    });
  }
  addMarker(latLng) {
    var marker = new google.maps.Marker({ position: latLng, map: this.map });
  }
}