谷歌地图搜索功能的bug

最新推荐文章于 2024-09-15 08:35:16 发布

爱睡D小猪

最新推荐文章于 2024-09-15 08:35:16 发布

阅读量910

点赞数 10

分类专栏：谷歌地图文章标签： bug vue

本文链接：https://blog.csdn.net/zhouloverbrother/article/details/135389794

版权

谷歌地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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);
            });