JQuery的 - 未捕獲的ReferenceError：大地定位沒有定義

Question

嘗試使用谷歌地址自動完成API。我的頁面加載正常，但是當啓動搜索時，它不會返回任何內容。當我檢查元素時，我得到以下錯誤[Uncaught ReferenceError：geolocate is not defined]。我搜索的SOF資源和嘗試以下操作：

• 我心中已經移到我的腳本的頁面
• 我已經添加了$（文件）。就緒的底部（函數（）
• 聲明我所有的變種全球
• 驗證所有引用的ID存在

我會很感激這樣的幫助。這我拉出什麼有點發我已經離開了。感謝

這裏是我的代碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"  CodeFile="tet.aspx.cs" Inherits="tet" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server"> 

<link href="Content/bootstrap.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script> 
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 

<div class="container-fluid"> 

    <%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server" > 
<ContentTemplate>--%> 
    <asp:Panel ID="Panel1" runat="server"> 
     <br /> 

     <div class="form-group"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <asp:TextBox ID="autocomplete" CssClass="form-control input-lg" runat="server" onFocus="geolocate()" placeholder="Enter your address..."></asp:TextBox> 
        <asp:HiddenField ID="street_number" runat="server" /> 
        <asp:HiddenField ID="route" runat="server" /> 
       </div> 
      </div> 
      <br /> 

      <div class="row"> 
       <div class="col-md-8"> 
        Address: 
<asp:TextBox ID="tb_AddressLine1" CssClass="form-control" ReadOnly="true" runat="server" ClientIDMode="Static"></asp:TextBox> 
       </div> 
      </div> 
      <br /> 

      <div class="row"> 
       <div class="col-md-4"> 
        City: 
<asp:TextBox ID="locality" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox> 
       </div> 
       <div class="col-md-2"> 
        State: 
<asp:TextBox ID="administrative_area_level_1" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox> 
       </div> 
       <div class="col-md-2"> 
        Postal Code: 
<asp:TextBox ID="postal_code" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox> 
       </div> 
       <div class="col-md-3"> 
        Country: 
<asp:TextBox ID="country" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox> 
       </div> 
      </div> 
     </div> 


<br /> 
</asp:Panel> 

- ％>

 <script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 
     $(document).ready(function() { 
      var geolocation 
      var val 
      var addressType 
      var component 
      var place 
     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 initialize() { 
     // Create the autocomplete object, restricting the search 
     // to geographical location types. 
     autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
     // When the user selects an address from the dropdown, 
     // populate the address fields in the form. 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     fillInAddress(); 
      }); 
     } 

     // [START region_fillform] 
     function fillInAddress() { 
     // Get the place details from the autocomplete object. 
     place = autocomplete.getPlace(); 

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


     $("#tb_AddressLine1").val(place.address_components[0][componentForm["street_number"]] + " " + 
     place.address_components[1][componentForm["route"]]); 

     // 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++) { 
     addressType = place.address_components[i].types[0]; 
     if (componentForm[addressType]) { 
     val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 

       } 
      } 
     } 
     // [END region_fillform] 

     // [START region_geolocation] 
     // 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) { 
     geolocation = new google.maps.LatLng(
     position.coords.latitude, position.coords.longitude); 
     autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, 
     geolocation)); 
       }); 
      } 
     } 
     // [END region_geolocation] 
     }); 

</div</asp:Content> 

Answer 1

不是在文本框的焦點這樣做的，你可以僅僅通過後調用geolocate()激活已初始化搜索框。這一定會奏效。

我誤以爲你最初使用谷歌地圖。

Answer 2

我想通了......我忘了補充的ClientIDMode =「靜態」的所有文本框，所以當頁面加載JavaScript不「看到」它正在尋找的字段。 補充說，它像一個魅力。