Javascript谷歌的地方工作在HTML,但不是在asp内容
本文关键字:asp 内容 HTML 谷歌 地方工作 Javascript | 更新日期: 2023-09-27 18:12:59
我试图使用一个javascript的例子使用谷歌的地方api来自动填充一些地址字段。它在html中按计划工作,但如果我想在标签内使用它,它就不起作用了。我在firefox中没有看到任何js错误。我认为我没有正确调用javascript。非常感谢你的帮助。我的代码的asp页面,js文件,和网站。Master如下:
测试。asp头
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="test.aspx.cs" Inherits="Project.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));
});
}
}
和网站。主
<%@ 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>© <%: DateTime.Now.Year %> - Riviera Tanning Spa</p>
</div>
</div>
</footer>
</form>
</body>
</html>
像这样改变js
document.getElementById("MainContent_autocomplete")