자동 완성과 Google지도를 어떻게 결합합니까?

-1

Google지도 API를 처음 사용했습니다. 도움을주세요. 지금까지 나는 자동 완성에 대한 입력을 얻을 수 있었다. 그리고 나는지도를 달리고있다. 여기에서 두 가지를 결합하여 자동 완성 목록에서 영역 (입력)을 선택하면지도가 선택된 영역으로 이동합니다. 자동 완성 기능으로지도를 시작하는 방법을 찾았습니다. 그러나 나는 그것들을 개별적으로 시작하여 입력이지도에 영향을 주길 바란다. 여기에 내 코드가있다. 여기서 내가 어디로 갈까?자동 완성과 Google지도를 어떻게 결합합니까?

<!DOCTYPE html> 
      <html> 
      <body> 
      <input id="pac-input" class="controls" type="text" placeholder="Enter a location"/> 
      <pre id="placeInfo"></pre> 
      <div id="map"></div> 
      <script> 
        var map; 
        function initMap1() { 
        map = new google.maps.Map(document.getElementById('map'), { 
         center: {lat: -34.397, lng: 150.644}, 
         zoom: 8 
        }); 
        } 

      function initMap2() { 
       var input = document.getElementById('pac-input'); 
       var autocomplete = new google.maps.places.Autocomplete(input); 
       autocomplete.addListener('place_changed', function() { 
       var place = autocomplete.getPlace(); 
       if (!place.geometry) { 
        window.alert("Autocomplete's returned place contains no geometry"); 
        return; 
       } 

       var address = ''; 
       if (place.address_components) { 
        address = [ 
        (place.address_components[0] && place.address_components[0].short_name || ''), 
        (place.address_components[1] && place.address_components[1].short_name || ''), 
        (place.address_components[2] && place.address_components[2].short_name || '') 
        ].join(' '); 
       } 

       document.getElementById('placeInfo').innerHTML = '<div><strong>' + place.name + '</strong><br>' + address;  
       }); 
      } 
      </script> 
      <script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&libraries=places&callback=initMap2" 
      async defer></script> 
      <script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&callback=initMap1" 
      async defer></script> 
      </body> 
      </html>

출처

2017-05-14 Same

'Google지도 API를이 페이지에 여러 번 포함 시켰습니다. 예기치 않은 오류가 발생할 수 있습니다 .' – geocodezip

한 가지 의견에서 언급했듯이 왜 문제가되는 부분은지도를 두 번 포함한다는 것입니다. 지도를로드 할 위치에 하나의 스크립트 태그 만 있으면됩니다.

<script src="https://maps.googleapis.com/maps/api/js?key=[API-key]&libraries=places&callback=initMap2" 
     async defer></script>

는 또한, 당신이 어떤 CSS를 가지고 있지 않기 때문에지도가 포함 된 div 잘 표시되지 않을 수 있습니다 : 이것은 당신이 사용되어야 하나입니다. 난 당신의 코드에 다음 CSS를 추가하는 것이 좋습니다 것 : 나는 또한 당신이 JS API를 bootsrap 각 스크립트 태그에 대해 다른 콜백 함수를 한 것으로 나타났습니다

#map { 
height: 100%; 
} 

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

. 이러한 스크립트 태그 중 하나만 필요하기 때문에 두 콜백 함수를 하나로 결합하는 것이 좋습니다.

자동 완성 입력이지도에 영향을 미치길 원한다고 말씀하셨습니다. 당신은 당신의 자동 완성 된 ActionListener 함수에서지도 객체를 변경하여이 작업을 수행 할 수 있습니다

map.setCenter(place.geometry.location);

나는이 당신을 위해 입증하는 JSBin 만들었습니다. JavaScript 코드에서 HTML을 분리하고 내가 제안한 CSS를 추가했습니다. JSBin은 제대로 작동하는 것처럼 보입니다. 보안을 위해 나는 JSBin에서 내 API 키를 제거한,이 샘플을 사용하는 것이 자신의 삽입하십시오

http://jsbin.com/xilepukure/1/edit?html,css,js,output

난이 도움이되기를 바랍니다!

출처

2017-05-16 19:57:55

자동 완성과 Google지도를 어떻게 결합합니까?

답변

관련 문제