Google지도 주소 자동 완성 asp.net mvc

Question

Google Maps 주소를 구현하려고합니다. ASP.Net MVC 애플리케이션에서 자동 완성됩니다. 그것은 벌금과 html 파일에 쉽게 작동 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

,하지만 난 MVC보기에서 구현하려고 할 때 - 드롭 다운 주소 상자에 나타나지 않습니다 : Google 예는 여기에서 가져옵니다. 내 Google 키가 API에 포함되어 있으며 Chrome의 '네트워크'탭에 참조 및 데이터 패키지가 표시됩니다.

저는 많은 시간 동안 이것을 연구하고 있었고 다른 접근법을 시도했습니다. 지금은 성공하지 못했습니다. 예를 들어, "scripts"@section에 스크립트를 포함하려고 시도했지만 성공하지 못했습니다.

나는 "scripts"태그 뒤에 클래스 "pac-container"와 div를 볼 수 있지만 어떤 이유 스타일이

:이 html 파일에서와 같이 내가 주소를 입력 할 때 "디스플레이 것도"하지 삭제합니다

Visual Studio 2015MVC5 템플릿을 사용하고 있습니다. MVC 소스보기는 여기에 있습니다 :

@{ 
    Layout = null; 
} 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map { 
      height: 100%; 
     } 
    </style> 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
    <style> 
     #locationField, #controls { 
      position: relative; 
      width: 480px; 
     } 

     #autocomplete { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 99%; 
     } 

     .label { 
      text-align: right; 
      font-weight: bold; 
      width: 100px; 
      color: #303030; 
     } 

     #address { 
      border: 1px solid #000090; 
      background-color: #f0f0ff; 
      width: 480px; 
      padding-right: 2px; 
     } 

      #address td { 
       font-size: 10pt; 
      } 

     .field { 
      width: 99%; 
     } 

     .slimField { 
      width: 80px; 
     } 

     .wideField { 
      width: 200px; 
     } 

     #locationField { 
      height: 20px; 
      margin-bottom: 2px; 
     } 
    </style> 

    <p>My Aaddress Autocomplete Example</p> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
       onFocus="geolocate()" type="text"></input> 
    </div> 

    <table id="address"> 
     <tr> 
      <td class="label">Street address</td> 
      <td class="slimField"> 
       <input class="field" id="street_number" 
         disabled="true"></input> 
      </td> 
      <td class="wideField" colspan="2"> 
       <input class="field" id="route" 
         disabled="true"></input> 
      </td> 
     </tr> 
     <tr> 
      <td class="label">City</td> 
      <td class="wideField" colspan="3"> 
       <input class="field" id="locality" 
         disabled="true"></input> 
      </td> 
     </tr> 
     <tr> 
      <td class="label">State</td> 
      <td class="slimField"> 
       <input class="field" 
         id="administrative_area_level_1" disabled="true"></input> 
      </td> 
      <td class="label">Zip code</td> 
      <td class="wideField"> 
       <input class="field" id="postal_code" 
         disabled="true"></input> 
      </td> 
     </tr> 
     <tr> 
      <td class="label">Country</td> 
      <td class="wideField" colspan="3"> 
       <input class="field" 
         id="country" disabled="true"></input> 
      </td> 
     </tr> 
    </table> 

    <script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 

     // This example requires the Places library. Include the libraries=places 
     // parameter when you first load the API. For example: 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

     var placeSearch, autocomplete; 
     var componentForm = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'short_name', 
     country: 'long_name', 
     postal_code: 'short_name' 
     }; 

     function initAutocomplete() { 
     // Create the autocomplete object, restricting the search to geographical 
     // location types. 
     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), 
      {types: ['geocode']}); 

     // When the user selects an address from the dropdown, populate the address 
     // fields in the form. 
     autocomplete.addListener('place_changed', fillInAddress); 
     } 

     function fillInAddress() { 
     // Get the place details from the autocomplete object. 
     var place = autocomplete.getPlace(); 

     for (var component in componentForm) { 
      document.getElementById(component).value = ''; 
      document.getElementById(component).disabled = false; 
     } 

     // Get each component of the address from the place details 
     // and fill the corresponding field on the form. 
     for (var i = 0; i < place.address_components.length; i++) { 
      var addressType = place.address_components[i].types[0]; 
      if (componentForm[addressType]) { 
      var val = place.address_components[i][componentForm[addressType]]; 
      document.getElementById(addressType).value = val; 
      } 
     } 
     } 

     // Bias the autocomplete object to the user's geographical location, 
     // as supplied by the browser's 'navigator.geolocation' object. 
     function geolocate() { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var geolocation = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 
      var circle = new google.maps.Circle({ 
       center: geolocation, 
       radius: position.coords.accuracy 
      }); 
      autocomplete.setBounds(circle.getBounds()); 
      }); 
     } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY=places&callback=initAutocomplete" 
      async defer></script> 

Answer 1

나는 문제의 원인을 발견하고 그것을 해결했습니다. Visual Studio에서 설정이 잘못 되었기 때문에 발생했습니다.