JavaScript的谷歌地方在HTML中，但不是内部asp内容

我想使用谷歌地方的API的例子来自动填充一些地址字段。它在html中按照计划工作，但如果我想在标签中使用它，它不起作用。我没有看到在Firefox中的任何JS错误。我在想，我没有正确地调用javascrip。非常感谢帮助。我的ASP页面，js文件和代码的Site.Master如下：JavaScript的谷歌地方在HTML中，但不是内部asp内容

Test.aspx的ASP头

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="test.aspx.cs" Inherits="Project.test" %>

Test.aspx的页面

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent" onload="javascript:initialize()"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
<script type="text/javascript" src="../Scripts/auto_complete.js"></script> 

<div id="locationField"> 

</div> 
    <div id="consent-form-container"> 

    <div class="box"> 
    <table> 
     <tr> 
      <td> 
      <asp:Label ID="Label8" runat="server" Text="Type Your Address:"></asp:Label> 
      </td> 
      <td> 
      <asp:TextBox id="autocomplete" type="text" runat="server" placeholder="Enter your address" onFocus="javascript:geolocate()"></asp:TextBox> 
      </td> 
     </tr> 

     <tr> 
      <td> 
       <asp:Label ID="Label9" runat="server" Text="Apt/Suite:"></asp:Label> 
      </td> 
      <td> 
       <asp:TextBox ID="apt_suite1" runat="server" type="text" CssClass="apt_suite"></asp:TextBox> 
      </td> 
     </tr>     
    </table> 
    </div> 

    <div class="box"> 
    <table id="address"> 
    <tr> 
     <td class="label">Street address</td> 
     <td class="slimField"><asp:TextBox class="field" runat="server" id="street_number" type="text" disabled="true"></asp:TextBox></td> 
     <td class="wideField" colspan="2"><input class="field" id="route" type="text" disabled="true"></input></td> 
    </tr> 
    <tr> 
     <td class="label">City</td> 
     <td class="wideField" colspan="3"><asp:TextBox class="field" runat="server" id="locality" type="text" disabled="true"></asp:TextBox></td> 
    </tr> 
    <tr> 
     <td class="label">State</td> 
     <td class="slimField"><asp:TextBox class="field" runat="server" id="administrative_area_level_1" type="text" disabled="true"></asp:TextBox></td> 
    </tr> 
    <tr> 
     <td class="label">Zip code</td> 
     <td class="wideField"><asp:TextBox class="field" runat="server" id="postal_code" type="text" disabled="true"></asp:TextBox></td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    </asp:Content>

auto_complete.js

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

function initialize() { 
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('<%= autocomplete.ClientID %>'), { types: ['geocode'] }); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     fillInAddress(); 
    }); 
} 

function fillInAddress() { 
    var place = autocomplete.getPlace(); 

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

    for (var j = 0; j < place.address_components.length; j++) { 
     var att = place.address_components[j].types[0]; 
     if (component_form[att]) { 
      var val = place.address_components[j][component_form[att]]; 
      document.getElementById(att).value = val; 
     } 
    } 
} 

function geolocate() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation)); 
     }); 
    } 
}

and site.Master

个

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Project.SiteMaster" %> 

<!DOCTYPE html> 
<html lang="es"> 
<head id="head" runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta charset="utf-8" /> 
<title><%: Page.Title %> title </title> 
<asp:PlaceHolder runat="server">  
     <%: Scripts.Render("~/bundles/modernizr") %> 
</asp:PlaceHolder> 
<webopt:BundleReference runat="server" Path="~/Content/css" /> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width" /> 
<asp:ContentPlaceHolder runat="server" ID="HeadContent" /> 
</head> 
<body id="body" runat="server"> 
    <form runat="server"> 
    <asp:ScriptManager runat="server"> 
    <Scripts> 
     <%--Site Scripts--%> 

    </Scripts> 
</asp:ScriptManager> 
<header> 
    <div class="content-wrapper"> 
     <div class="float-left"> 
      <p class="site-title"> 
       <a runat="server" href="~/"><img src="/Images/logo.png" /></a> 
      </p> 
     </div> 
     <div class="float-right"> 
      <section id="login"> 
       <asp:LoginView runat="server" ViewStateMode="Disabled"> 
        <AnonymousTemplate> 
         <ul> 
          <li><a id="loginLink" runat="server" href="~/Account/Login">Login</a></li> 
         </ul> 
        </AnonymousTemplate> 
        <LoggedInTemplate> 
         <p> 
          Welcome admin!, <a runat="server" class="username" href="~/admin" title="" style="color:white"> 
           <!--<asp:LoginName runat="server" CssClass="username" ForeColor="White" />-->View Forms</a> 
          <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Logout" LogoutPageUrl="~/" /> 
         </p> 
        </LoggedInTemplate> 
       </asp:LoginView> 
      </section> 
     </div> 
    </div> 
</header> 
<div id="body_div"> 
    <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" /> 
    <section class="content-wrapper main-content clear-fix"> 
     <asp:ContentPlaceHolder runat="server" ID="MainContent" /> 
    </section> 
</div> 
<footer> 
    <div class="content-wrapper"> 
     <div class="float-left"> 
      <p>&copy; <%: DateTime.Now.Year %> - Riviera Tanning Spa</p> 
     </div> 
    </div> 
</footer> 
</form> 
</body> 
</html>

来源

2013-05-10 user2371033

变化JS这样

document.getElementById("MainContent_autocomplete")

来源

2013-05-10 18:59:23 Emre

我试过，但它仍然是行不通的。这应该是简单的我在这里失踪了..好吗？ :) – user2371033 2013-05-10 19:35:13

在Firefox中你可以“检查项目”（不知道命令的确切名称，但它是这样的事情，当你右键点击浏览器中的任何项目时）你的“自动完成”文本框，并检查什么是“ID”它？或者只是检查源代码或你的页面来查找ID。它应该是与主页面“MainContent_autocomplete”，但也许它的东西不同.. – Emre 2013-05-10 19:49:13

这里是我发现的东西，自动完成构造函数带两个参数：一个HTML输入元素的文本类型。这是自动填充服务将监视并将其结果附加到的输入字段。我在这里找到了这个信息.... https：//developers.google.com/maps/documentation/javascript/places#adding_autocomplete也许这只能用于文本类型的html标签？对不起，我已经过了一个星期了。 – user2371033 2013-05-21 21:26:29

JavaScript的谷歌地方在HTML中，但不是内部asp内容

回答

相关问题