Google Maps JavaScript API 和 Ionic 5，搜索欄不起作用

Question

我正在使用 Javascript google maps 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 獲取標簽的值，即<ion-searchbar>