Google API Places-Searchbox Angle 8

如何解决Google API Places-Searchbox Angle 8

我找到了一个链接，用于运行在 JsFiddle 上进行搜索的地方，但是我不知道如何在我的代码中进行操作。这是我在下面关注的链接。
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox#maps_places_searchbox-typescript

正如我在 JsFiddle 中看到的代码一样，它可以正常工作，但是当我在下面的 Angular 8 中传输代码时。

这是我的 TestPage4.ts

import { Component,OnInit } from '@angular/core';
import { google } from '@agm/core/services/google-maps-types';

@Component({
  selector: 'TestPage4',templateUrl: './TestPage4.html',styleUrls: ['./TestPage4.css']
})

export class TestPage4 implements OnInit {
  constructor() {
  }
  ngOnInit() {
    //this.initAutocomplete();
    //throw new Error("Method not implemented.");
  }initAutocomplete() {
    const map = new google.maps.Map(document.getElementById("map"),{
      center: {
        lat: -33.8688,lng: 151.2195
      },zoom: 13,mapTypeId: "roadmap"
    }); // Create the search box and link it to the UI element.
  
    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport.
  
    map.addListener("bounds_changed",() => {
      searchBox.setBounds(map.getBounds());
    });
    let markers = []; // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
  
    searchBox.addListener("places_changed",() => {
      const places = searchBox.getPlaces();
  
      if (places.length == 0) {
        return;
      } // Clear out the old markers.
  
      markers.forEach(marker => {
        marker.setMap(null);
      });
      markers = []; // For each place,get the icon,name and location.
  
      const bounds = new google.maps.LatLngBounds();
      places.forEach(place => {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
  
        const 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)
        }; // Create a marker for each place.
  
        markers.push(
          new google.maps.Marker({
            map,icon,title: place.name,position: place.geometry.location
          })
        );
  
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }
}

这是我的 TestPage4.html

<div class="row m-t-15" style="background:#FFF;"> 
  <div class="col-12 n_m_p panel panel-inverse" data-sortable-id="table-basic-7" style="margin:0; padding:0;">
    <!DOCTYPE html>
    <html>
      <head>
        <title>Places Search Box</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <script
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
          defer
        ></script>
        <!-- jsFiddle will insert css and js -->
      </head>
      <body>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box" />
        <div id="map"></div>
      </body>
    </html>
</div>
</div>

现在，如果我尝试添加

ngOnInit() {
    this.initAutocomplete();
  }

它给了我这样的错误 ERROR TypeError：无法读取未定义的属性“地图” 。这是下面的屏幕截图。

我不明白如何使此代码在搜索地图上的位置时起作用。？

Google API Places-Searchbox Angle 8

如何解决Google API Places-Searchbox Angle 8

相关推荐