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

Question

我想将纬度和经度值从两个TextBox发送到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

根据google API V3参考 ，构造函数为

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

尝试改为获取文本框值：

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

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

Answer 3

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

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

Answer 4

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

这样使用将起作用