JQuery - 未捕获的 ReferenceError：未定义地理定位

Question

尝试使用 Google 地址自动完成 API。我的页面加载正常，但是在启动搜索时它不返回任何内容。当我检查元素时，我收到以下错误 [Uncaught ReferenceError: geolocate is not defined]。我搜索了 SOF 上的资源并尝试了以下方法：

• 我已将脚本移至页面底部
• 我已经添加了 $(document).ready(function ()
• 全局声明我的所有变量
• 已验证所有引用的 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

我想通了...我忘记将 ClientIDMode="Static" 添加到所有文本框，所以当页面加载时，JavaScript 不会“看到”它正在寻找的字段。 添加了它，它就像一个魅力。

Answer 2

您可以在初始化搜索框后调用geolocate() 来激活它，而不是在文本框的焦点上执行此操作。这肯定会奏效。

我错误地认为您最初使用的是 Google 地图。