Google Places 자동 완성이 표시되지 않음
간단한 자동완성이 왜 나타나지 않았는지 알아내기 위해 몇 시간째 연구 중이야
내 코드에서 입력 요소는 다음과 같이 설정되어 있습니다.autocompete="off"그리고 팩스타일의 스타일은display: none.
DevTools에서 이러한 값을 변경할 수 있고 정상적으로 작동하지만 이러한 값이 어떻게 설정되었는지 또는 왜 설정되었는지 알 수 없습니다.
자동완성은 다음과 같이 각도지시로 설정되며 loadGmaps는 구글 API를 가져옵니다.
템플릿: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',링크: functions, elm, attributes){loadGmaps().그러면(function(){
var autocomplete = 새 google.google.places.자동완료("$("#google_places_ac")[0], {});console.log(불완전);
google.maps.event.addListener(autocomplete, 'place_changed', function() {var place = autocomplete.getPlace();$140입니다.위치 = {lat: place.disc.location.latvslon: place.location.lng()};$140입니다.$syslog();});});
-------------------------------------------------------------------------------
다른 누구도 이것에 의해 타락하지 않기를 바랍니다.autocomplete="off"조금 오해의 소지가 있습니다.와 함께라도autocomplete="off"자동완성은 아직 작동하기 때문에 문제가 되지 않았습니다.의 css를 덮어쓰고 있습니다..pac-container요소 - 결과를 보관합니다.
.timeout { //구글 자동완성이 표시되지 않는 경우의 수정입니다.z-index: 10000!중요;디스플레이: 블록!중요;}
문제는 자동완료에서 항목을 선택하면 자동완료 상태가 유지된다는 것입니다. 자동완료를 사용하는 것이 더 나은 방법이 있을 것입니다.
다른 사용자가 막히거나 문제가 있는 경우 '불완전="no" 값을 무시하고 '.display: block'을 사용하여 '.display-display'를 표시하지 마십시오.
크롬 개발 도구에 들어가서.pac-containerdiv. css에서 해당 div의 z-index를 설정합니다.검색된 값이 있으면 구글은 표시를 차단하고 표시 및 숨기기를 처리하도록 변경하므로 z-index를 걱정하면 됩니다.
인덱스 파일에서 지도 버전 확인
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>
Google Map API를 로드할 때 v=3.26 지정
.pac-container되지 않음: 때, 「」를 : 「」는 표시되지 않습니다.<body> 친척하지 않는 경우<body> 내리다0가 더 합니다..pac-container 에 있고 있지만 않는것을 알 수 .이 경우 devtools를 사용하여 팩 용기가 올바른 위치에 있고 높이가 있지만 보이지 않음을 확인할 수 있습니다.
body{min-height:calc(100vh)}도움이 될 거야
Vince Lowe가 이 코멘트에서 제시한 바와 같이:
.pac-container { z-index: 10000 !important; }
Google 지도에서 Direction API를 활성화하고 계정에서 과금이 활성화되었는지 확인하십시오.
언급URL : https://stackoverflow.com/questions/20185606/google-places-autocomplete-not-showing-up
'programing' 카테고리의 다른 글
| Chrome 확장 hint.js & ngHint Modules (0) | 2023.04.05 |
|---|---|
| 클릭 시 버튼 유형 변경 (0) | 2023.04.05 |
| 쿠폰 적용 시 세금 제외, 품목 세금 포함 (0) | 2023.04.05 |
| AngularJs ngOptions 정렬 배열 (0) | 2023.04.05 |
| 각도 1.5 구성 요소와 기존 지침 - 링크 기능은 어디에 있습니까? (0) | 2023.04.05 |