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

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

尝试获取文本框值：

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

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

Answer 3

您应该使用textbox的.value属性。例如

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

Answer 4

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

像这样使用这将起作用

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

4 个答案: