谷歌地图搜索功能的bug

1、当页面结构复杂，具体原因不知道，主要会导致pac-container 搜索列表容器跑到body，不会显示在input下，解决方案有一个：手动强制修改

<div class="map_container" style="height:100%;"><div class="input_box"><input id="searchInput" ref="searchInput" v-model="searchKey" type="text" /></div><div id="gmap" ref="gmap" style="height:100%;"></div><div id="infowindow-content"><span id="place-name" class="title"></span><br /><span id="place-address"></span></div></div>

 mounted () {var addressInputElement = document.querySelector('#searchInput');addressInputElement.addEventListener('focus', function () {var pacContainer = document.querySelector('.pac-container');addressInputElement.parentNode.appendChild(pacContainer);}); }

//scss语法::v-deep .pac-container {z-index: 9999999 !important;top: 30px !important;left: 0 !important; }

以下是谷歌地图的搜索功能的js代码

const mapDiv = document.getElementById('gmap');const map = new google.maps.Map(mapDiv, option);let options = {fields: ['ALL'],//搜索类型 ："formatted_address", "geometry", "name" strictBounds: false,//严格模式};const input = document.getElementById('searchInput');console.log(input, 'this.optioninputinput');const autocomplete = new google.maps.places.Autocomplete(input, options);console.log(autocomplete, ' this.autocomplete');autocomplete.bindTo("bounds", map);//设置搜索地址功能const infowindow = new google.maps.InfoWindow();const infowindowContent = document.getElementById('infowindow-content');infowindow.setContent(infowindowContent);const marker = new google.maps.Marker({map: map,anchorPoint: new google.maps.Point(0, -29),});autocomplete.addListener("place_changed", () => {infowindow.close();marker.setVisible(false);const place = autocomplete.getPlace();console.log('触发搜索组件', place);if (!place.geometry || !place.geometry.location) {window.alert("No details available for input: '" + place.name + "'");return;}if (place.geometry.viewport) {map.fitBounds(place.geometry.viewport);} else {map.setCenter(place.geometry.location);map.setZoom(17);}marker.setPosition(place.geometry.location);marker.setVisible(true);infowindowContent.children["place-name"].textContent = place.name;infowindowContent.children["place-address"].textContent = place.formatted_address;infowindow.open(map, marker);});