Google Maps JavaScript API 和 Ionic 5，搜索栏无法正常工作

Question

我正在使用 Javascript google 地图 api 开发 Ionic Framework 5。

谷歌地图一直运行良好。我现在想添加一个功能，可以使用搜索栏搜索位置。

我正在尝试将搜索栏添加到现有的谷歌地图页面，以便我可以获得位置，但由于某种原因，我收到以下错误消息。

有人可以建议我做错了什么吗？

请参阅下面我的代码..

  adddevicetomap(lat, long) {
    this.page_loaded_fully = true;
    //  const pos = {
    //    lat: lat,
    //    lng: long
    //  };
     
      const pos = {
      lat: 51.5465636,
      lng: 0.0117562
    };
    this.map = new google.maps.Map(this.mapNativeElement.nativeElement, {
      center: pos,
      zoom: 14,
    }
    );

    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox("E7");


    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    // Bias the SearchBox results towards current map's viewport.
    this.map.addListener("bounds_changed", () => {
      searchBox.setBounds(this.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 || !place.geometry.location) {
        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:this.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);
      }
    });
    this.map.fitBounds(bounds);
  });

core.js:6241 
        
       ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at AirlitePage.update_sensor_select (airlite.page.ts:1119:35)
    at airlite.page.ts:1109:15
    at ZoneDelegate.invokeTask (zone-evergreen.js:400:1)
    at Object.onInvokeTask (core.js:41686:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Zone.runTask (zone-evergreen.js:168:1)
    at invokeTask (zone-evergreen.js:481:1)
    at ZoneTask.invoke (zone-evergreen.js:470:1)
    at timer (zone-evergreen.js:2535:1)

  <div [hidden]=page5_hidden class="pagefourdiv">
    <!-- <input
    id="pac-input"
    class="controls"
    
    placeholder="Search Box"/> -->

    <ion-searchbar  type="text" placeholder="Search Box" showCancelButton="always" class="pac-input"></ion-searchbar>

    <div #mapElement class="map"></div>
    <ion-grid>
      <ion-row>
        <ion-button (click)="GetCurrentPosition()">My location
        </ion-button> 
        </ion-row>        
        <ion-row>
        <ion-text>Local Air Weather </ion-text>
      </ion-row>

    </ion-grid>
  </div>

Answer 1

首先，您没有取出用户的输入值，

您的离子搜索键应该看起来像这样，

<ion-searchbar (ionInput)="changeFunction($event.target.value)"  type="text" placeholder="Search Box" showCancelButton="always" class="pac-input"></ion-searchbar>

以使该值输入搜索栏中，请使用$ event.target.value，该值获得标签的值，该值是＆lt; ion-searchbar＆gt;