谷歌地图放置搜索框在角度6

Question

如本链接所述，如何在角度6中添加Google Maps Place搜索框实现， https://developers.google.com/maps/documentation/javascript/examples/places-searchbox#try-it-yourself。如果我在搜索框中输入了任何查询（如任何地址），然后按Enter键，则需要在Google地图上显示该地点

app.component.ts

import {
    Component,
    OnInit,
    NgZone,
    ViewChild,
    ElementRef
} from "@angular/core";
import { MapsAPILoader } from "@agm/core/services/maps-api-loader/maps-api-loader";
import { AgmMap } from "@agm/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "dummyAGM";

  lat: number = 36.6683764;
  lng: number = 48.5146292;
  zoom = 8;
  agmMap: any;
  bounds: google.maps.LatLngBounds;
  searchBox: any;
  markers: google.maps.Marker[];
  icon: any;

        @ViewChild("search") public searchElement: ElementRef;
         places: any;

  @ViewChild("agmMap") set content(map: AgmMap) {
    if (map) {
      map.mapReady.subscribe(map => {
        this.agmMap = map;
      });
    }
  }

  constructor(private mapsAPILoader: MapsAPILoader, private NgZone: NgZone) {}



  ngOnInit() {

    this.mapsAPILoader.load().then(() => {
      console.log(this.agmMap);
      this.places = this.searchElement;
      this.bounds = new google.maps.LatLngBounds();
      this.searchBox = new google.maps.places.SearchBox(
        this.searchElement.nativeElement
      );
      // this.agmMap.ControlPosition[google.maps.ControlPosition.TOP_LEFT].push(
      //   this.searchElement.nativeElement
      // );
      // this.agmMap.addListener("bounds_changed", () => {
      //   this.searchBox.setBounds(this.agmMap.getBounds());
      // });
      this.searchBox.addListener("places_changed", () => {
        var places = this.searchBox.getPlaces();

        if (places.length === 0) {
          return;
        }

        // Clear out the old markers.
        this.markers.forEach(marker => {
          marker.setMap(null);
        });
        this.markers = [];
        this.bounds = new google.maps.LatLngBounds();
        places.forEach(place => {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
          this.icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };
          this.markers.push(
            new google.maps.Marker({
              map: this.agmMap,
              icon: this.icon,
              title: place.name,
              position: place.geometry.location
            })
          );
          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            this.bounds.union(place.geometry.viewport);
          } else {
            this.bounds.extend(place.geometry.location);
          }
        });
        this.agmMap.fitBounds(this.bounds);
      });
    });
  }
}

app.html

<input class="form-control mr-sm-3" type="text" 
placeholder="Search for Location" autocorrect="off" n 
autocapitalize="off"
spellcheck="off" class="form-control" #search  id="pac-input" 
class="controls">

<agm-map [latitude]="lat" [longitude]="lng" #agmMap 
[mapTypeId]="'roadmap'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

错误

ControlPosition无法读取undefined的属性。

Answer 1

您的API密钥最终是否与此相似？ “＆v = 3＆libraries =地方”

这将允许您使用Google提供的库，以便进行搜索。