无法将 Asp.net 控件的值传递给 javascript 函数

Question

我想将两个文本框的纬度和经度值发送到一个 java 脚本函数，该函数在地图上的该位置显示一个标记。

我已经写了以下代码，但是它不起作用：

<script type="text/javascript">
var map;
function init()
{
    var mapoptions=
    {
        center: new google.maps.LatLng(17.379064211298, 78.478946685791),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
}    
function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>'),document.getElementById('<%=TextBox2.ClientID %>'));
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}   
</script>

按钮控件代码：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark()" />

不显示标记。 Chrome 控制台也不会显示任何错误。我哪里错了？

Answer 1

根据to the google API V3 reference，构造函数是

LatLng(lat:number, lng:number, noWrap?:boolean)

所以你的功能可能是：

function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

并将您的按钮定义更新为：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(); return false;" />

但可能会更好：

function placemark(lat, lng)
{
   var ulatlng= new google.maps.LatLng(lat,lng);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
} 

并将您的按钮更新为：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value); return false" />

无论哪种方式，请确保您包含“return false”，以便您的页面不会回发，从而导致刷新。

如果你想更干净：

ASCX：

<asp:Button ID="uxBtnPlaceMarker" runat="server" Text="Place Marker" />

后面的代码：

   protected void Page_Load(Object sender, EventArgs args)
   {
       //...Do whatever you do here...
       this.uxBtnPlaceMarker.OnClientClick = string.Format("placemark(document.getElementById('{0}').value,document.getElementById('{1}').value); return false", TextBox1.ClientID, TextBox2.ClientID);
   }

Answer 2

你应该使用文本框的 .value 属性。例如

    var mapCan = document.getElementById("map_can").value;

Answer 3

尝试获取文本框的值：

var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value)

您还可以尝试缩小地图。标记可能放错了位置并显示在其他地方（Lat Long 已交换）。测试用正确的值替换文本框并确保标记显示

Answer 4

var ulatlng=  document.getElementById(TextBox1).value; 

这样使用就可以了