javascripts google api函数在事件onclick和OnClientClick的asp和html按钮中表现不同

问题描述：

当我从一个按钮的OnClientClick事件调用asp.net中的javascript google api函数时出现问题，该函数被执行，但结果与我在html按钮上运行函数时显示的结果不同，函数只需要指定一个地理coordenada一个教科书控件，区别在于参数状态中的html函数设置为OK，而asp按钮的OnClientClick事件取值ERROR，有人可以帮助我，我不知道我知道我做错了或者我没有考虑asp控件。我需要使用值txtLng和txtLat在CodeBehind中使用它们。

提前谢谢。

我显示代码下面：

代码Javascript：

I have a problem when I call a javascript google api function in asp.net from the OnClientClick event of a button, the function is executed, but the result is different the one shown when I run the function from at a html button, the function simply must assign a geographical coordenada a textbook control, the difference is that the html function in the parameter status is set to OK and the OnClientClick event of the asp button takes the value of ERROR, someone could help me, I don't know that I am doing wrong or I'm not considering the asp controls. I need the values txtLng and txtLat for work with them in the CodeBehind.
Thank you in advance.

I show the code below:

Code Javascript:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
	 			zoom: 8,
	 			center: latlng,
	 			mapTypeId: google.maps.MapTypeId.ROADMAP
	 		    }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
 
function codeAddress(txtAddressClientId, txtLatClientId, txtLngClientId) {
var address = window.document.getElementById(txtAddressClientId).value;
geocoder.geocode
({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
	var marker = new google.maps.Marker({
	 	map: map,
	 	position: results[0].geometry.location,
	 	title: results[0].formatted_address
	 	});
	document.getElementById(txtLatClientId).value = marker.position.lat()
	document.getElementById(txtLngClientId).value = marker.position.lng();
	}
	else {
	 		alert("Geocode was not successful for the following reason: " + status);
	 	}
	 });
} 	
</script>

onClientClick事件：

onClientClick event:

<body onload="initialize();">
    <form id="form1" runat="server">
    <div>
    <asp:label ID="Label1" runat="server" text="lugar">
	 </asp:label> <br />
	 <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox> <br />
	 <asp:label ID="Label2" runat="server" text="latitud"> </asp:label> <br />
	 <asp:TextBox ID="txtLat" runat="server"></asp:TextBox> <br />
	 <asp:label ID="Label3" runat="server" text="longitud"></asp:label><br />
	 <asp:TextBox ID="txtLng" runat="server"></asp:TextBox> <br />
	 <asp:button id="btnBuscar" runat="server" text="Buscar" cssclass="btn" xmlns:asp="#unknown" />
 </div>
    </form>
</body>

代码vb：

code vb:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
     btnBuscar.OnClientClick = "return codeAddress('" & txtAddress.ClientID & "','" & txtLat.ClientID & "','" & txtLng.ClientID & "')"
End Sub

如果我在onclick事件中使用相同的函数类型按钮的输入元素，代码完全符合我的要求，但我希望代码能够使用asp.net按钮来获取代码隐藏中的控制值。

If I use the same function in the onclick event of an input element of type button, the code does exactly what I want, but I want the code to run with asp.net button for taking control values in codebehind.

答

您不能在javascript中使用'<％= txtLat.ClientID％>'。这是asp标记。

You can't use '<%= txtLat.ClientID %>' in javascript. This is asp mark up.

document.getElementById('<%= txtLat.ClientID  %>').value = marker.position.lat()
document.getElementById('<%= txtLng.ClientID  %>').value = marker.position.lng();

更改功能代码地址（）

Change function codeAddress()

function codeAddress()

to

function codeAddress(txtAddressClientId,txtLatClientId,txtLngClientId)

替换javascript行

Replace javascript lines

var address = window.document.getElementById('<%= txtAddress.ClientID  %>').value;
document.getElementById('<%= txtLat.ClientID  %>').value = marker.position.lat()
document.getElementById('<%= txtLng.ClientID  %>').value = marker.position.lng();

With

var address = window.document.getElementById(txtAddressClientId).value;
document.getElementById(txtLatClientId).value = marker.position.lat()
document.getElementById(txtLngClientId).value = marker.position.lng();

删除onClientClick事件。这将在后面的代码中设置。

Remove the onClientClick event. This will be set in the code behind.

<asp:button id="btnBuscar" runat="server" text="Buscar" cssclass="btn" onclick="btnBuscar_Click" xmlns:asp="#unknown" />

在设置的代码中使用onClientClick方法。

In the code being set the onClientClick method.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
     btnBuscar.OnClientClick = "return codeAddress('" & txtAddress.ClientID & "','" & txtLat.ClientID & "','" & txtLng.ClientID & "')"
End Sub

这是一个工作示例。最大的变化是有一个按钮用谷歌执行javascript动作，另一个按钮做回发（btnSendValuesToCodeBehind）。你很可能想隐藏btnSendValuesToCodeBehind不设置visible = false使用style =display：none;

ASPX页面：

Here is a working example. The big change was having one button to perform the javascript actions with google and the other button to do the postback(btnSendValuesToCodeBehind). You will most likely want to hide btnSendValuesToCodeBehind don't set visible=false use style="display:none;"

ASPX Page:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Intranet.WebForm1" %>

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    document.getElementById('txtLat').value = marker.position.lat();
                    document.getElementById('txtLng').value = marker.position.lng();
                    document.getElementById('btnSendValuesToCodeBehind').click();
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="text" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
        <form runat="server">
            latitude<br />
            <asp:textbox id="txtLat" runat="server" asp:textbox> <br />
            longitude<br />
            <asp:textbox id="txtLng" runat="server" asp:textbox> 
            <asp:button id="btnSendValuesToCodeBehind" runat="server" text="Send Values To CodeBehind" />
        </form>
 
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

代码背后：

Code Behind:

Private Sub btnSendValuesToCodeBehind_Click(sender As Object, e As EventArgs) Handles btnSendValuesToCodeBehind.Click
    Dim latitude As String = txtLat.Text
    Dim longitude As String = txtLng.Text
End Sub

javascripts google api函数在事件onclick和OnClientClick的asp和html按钮中表现不同

相关推荐