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

I want to send Latitude and longitude values from two TextBoxes to a java script function that displays a marker at that location on the map.

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

I have written the following code but it doesn't work:

我已经写了下面的代码，但是不行:

<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>

Button controls code:

按钮控件代码:

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

Marker isn't displayed. Also Chrome console doesn't display any errors. Where am I wrong?

标记不显示。此外，Chrome控制台不会显示任何错误。我在哪儿错了?

4 个解决方案

#1

According to the google API V3 reference, the constructor is

根据谷歌API V3引用，构造函数为

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

So your function could be:

所以你的函数可以是:

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});
}

And update your button definition as:

更新您的按钮定义为:

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

But would probably be better as:

但可能会更好:

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

And update your button to be:

并将您的按钮更新为:

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

Either way, please ensure you include "return false" so your page does not postback, causing the refresh.

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

If you wanted to be even cleaner:

如果你想变得更干净:

ASCX:

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

Code behind:

背后的代码:

   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);
   }

#2

You should use .value property of textbox. for example

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

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

#3

Try getting the text boxes values instead:

尝试获取文本框的值，而不是:

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

What you also can try is to zoom out on the map. The marker might be misplaced and show somewhere else (Lat Long swapped). To test replace the text boxes with the correct values and ensure that the marker displays

你还可以试着在地图上缩小。标记可能放错了地方，并显示在其他地方(Lat Long swap)。测试用正确的值替换文本框，并确保标记显示。

#4

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

use like this this will work

像这样使用，这样就可以了

#1