javascript - 与 am4map 一起使用时自动完成功能不起作用

Question

我在上一个问题上犯了一个错误，所以我再次发布添加更多信息。我在页面中使用 am4maps 以及带有自动完成功能的谷歌地图。问题是当我显示 am4maps 地图时，谷歌自动完成窗口结果消失了，我无法使用它。

我有一个主组件，上面有两个子组件：Map 和 DetailView

地图组件：

    <template>
        <div>
            <div class="map" ref="map"></div>
        </div>
    </template>
    
    <script>
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4maps from "@amcharts/amcharts4/maps";
    import am4geodata_worldHigh from "@amcharts/amcharts4-geodata/worldHigh";
    
    import cities from "./mock";
    
    export default {
        name: "Map",
        mounted() {
            let map = am4core.create(this.$refs.map, am4maps.MapChart);
            map.geodata = am4geodata_worldHigh;
            map.projection = new am4maps.projections.Mercator();
    
            map.homeZoomLevel = 18;
            map.homeGeoPoint = { longitude: 16, latitude: 43 };
            map.chartContainer.wheelable = false;
            map.seriesContainer.draggable = false;
            map.seriesContainer.resizable = false;
    
            map.zoomControl = new am4maps.ZoomControl();
            map.zoomControl.align = "right";
            map.zoomControl.valign = "top";
            map.zoomControl.slider.height = 100;
    
            // Polygons template
            let polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
            polygonSeries.useGeodata = true;
    
            let polygonTemplate = polygonSeries.mapPolygons.template;
            polygonTemplate.tooltipText = "{name}";
            polygonTemplate.fill = am4core.color("#5aade8");
    
            let hs = polygonTemplate.states.create("hover");
            hs.properties.fill = am4core.color("#9EC4E8");
    
            // Cities bullets
            let citySeries = map.series.push(new am4maps.MapImageSeries());
    
            let imageSeriesTemplate = citySeries.mapImages.template;
            let circle = imageSeriesTemplate.createChild(am4core.Circle);
    
            circle.radius = 6;
            circle.fill = am4core.color("#383b3d");
            circle.stroke = am4core.color("#ffffff");
            circle.strokeWidth = 2;
            circle.nonScaling = true;
            circle.tooltipText = "{name} : {value}";
    
            imageSeriesTemplate.propertyFields.latitude = "latitude";
            imageSeriesTemplate.propertyFields.longitude = "longitude";
    
            citySeries.data = cities;
        }
    };
    </script>

详细视图组件

    <template>
        <div>
            <GmapAutocomplete
                @place_changed="setPlace"
                class="form-control mb-3"
                :options="{
                    fields: ['geometry', 'formatted_address']
                }"
                placeholder="Address or name of the place"
                :value="
                    theatreAddress === null ||
                    (Object.keys(theatreAddress).length === 0 &&
                        theatreAddress.constructor === Object)
                        ? ''
                        : theatreAddress.address
                "
            ></GmapAutocomplete>
            <GmapMap
                style="width: 100%; height: 250px;"
                :zoom="14"
                :center="
                    theatreAddress === null ||
                    (Object.keys(theatreAddress).length === 0 &&
                        theatreAddress.constructor === Object)
                        ? { lat: 39.223841, lng: 9.121661 }
                        : {
                              lat: this.theatreAddress.lat,
                              lng: this.theatreAddress.lng
                          }
                "
            >
                <GmapMarker
                    v-if="theatreAddress"
                    label="★&quot;
                    :position="
                        theatreAddress === null ||
                        (Object.keys(theatreAddress).length === 0 &&
                            theatreAddress.constructor === Object)
                            ? { lat: 39.223841, lng: 9.121661 }
                            : {
                                  lat: this.theatreAddress.lat,
                                  lng: this.theatreAddress.lng
                              }
                    "
                />
            </GmapMap>
        </div>
    </template>
    
    <script>
    import { mapActions, mapGetters } from "vuex";
    
    export default {
        data() {
            return {
                markers: [],
                place: null
            };
        },
        description: "Autocomplete",
        computed: {
            ...mapGetters("theatre", ["theatreAddress"])
        },
        methods: {
            ...mapActions("theatre", ["setTheatreAddress"]),
            setPlace(place) {
                this.place = place;
                const address = {
                    address: this.place.formatted_address,
                    lat: this.place.geometry.location.lat(),
                    lng: this.place.geometry.location.lng()
                };
    
                if (this.theatreAddress !== null && this.theatreAddress.id) {
                    address.id = this.theatreAddress.id;
                }
    
                this.setTheatreAddress(address);
            }
        }
    };
    </script>

当我将 Map 组件与 detailView 一起显示时，谷歌地图自动完成窗口消失了……我不知道是什么原因。有什么建议吗？

谢谢