ASP.NET中如何将JavaScript获取的地理坐标赋值给C#服务器控件？

首先咱们先理清你当前代码里的几个核心问题：

1. 服务器控件的客户端ID不匹配 #

ASP.NET的服务器控件（比如<asp:Label>）渲染到客户端时，会自动生成包含命名容器的ID（类似ctl00_MainContent_latitude），你直接用document.getElementById('latitude')根本找不到对应的元素，这是第一个踩坑点。

2. 原生JS没有text()方法 #

你代码里的longitude.text(long);是jQuery的用法，但你没引入jQuery库，原生JS应该用textContent或者innerHTML来设置元素内容。

3. 客户端DOM修改无法同步到服务器端 #

就算你成功修改了Label的客户端显示内容，服务器端控件的状态是靠ViewState维护的，客户端的DOM修改不会自动回传到服务器，所以服务器端还是拿不到这个值——这是最关键的问题。

解决方案一：先让客户端正确显示坐标 #

先修改JavaScript代码，解决ID匹配和内容设置的问题：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=ABC"></script>
<script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 20,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style='height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude,
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });

        // 修正：用ClientID获取正确的客户端元素ID
        var latitudeEl = document.getElementById('<%= latitude.ClientID %>');
        var longitudeEl = document.getElementById('<%= longitude.ClientID %>');
        
        // 修正：用原生JS设置文本内容
        latitudeEl.textContent = p.coords.latitude;
        longitudeEl.textContent = p.coords.longitude;
    });
} else {
    alert('Location feature is not supported in this browser.');
}
</script>

这样修改后，客户端的Label会正确显示坐标，但服务器端仍然拿不到这个值，如果需要服务器端也能获取，看下面的方案。

解决方案二：将坐标回传到服务器端 #

地理坐标是在客户端获取的，必须通过HTTP请求把数据发送到服务器，才能让服务器端控件拿到值。这里推荐用AJAX的方式：

步骤1：添加隐藏字段（用于暂存坐标，方便回传）

<div>
    <div id="dvMap" style="width: 500px; height: 500px"></div>
    <asp:Label ID="latitude" runat="server"></asp:Label>
    <asp:Label ID="longitude" runat="server"></asp:Label>
    <!-- 添加隐藏字段存储坐标 -->
    <asp:HiddenField ID="hdnLatitude" runat="server" />
    <asp:HiddenField ID="hdnLongitude" runat="server" />
</div>

步骤2：修改JS，发送AJAX请求到服务器

// 在获取到坐标后添加这段代码
var lat = p.coords.latitude;
var lng = p.coords.longitude;

// 先更新隐藏字段
document.getElementById('<%= hdnLatitude.ClientID %>').value = lat;
document.getElementById('<%= hdnLongitude.ClientID %>').value = lng;

// 发送AJAX请求到服务器端方法
var xhr = new XMLHttpRequest();
xhr.open("POST", "YourPage.aspx/SaveCoordinates", true);
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功后刷新页面，让服务器控件更新显示
        window.location.reload();
    }
};
xhr.send(JSON.stringify({ latitude: lat, longitude: lng }));

步骤3：在服务器端添加WebMethod

在你的ASP.NET页面后台代码（.cs文件）里添加静态WebMethod：

using System.Web.Services;

public partial class YourPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // 页面加载时，从隐藏字段取值更新Label
        if (!string.IsNullOrEmpty(hdnLatitude.Value))
        {
            latitude.Text = hdnLatitude.Value;
            longitude.Text = hdnLongitude.Value;
        }
    }

    [WebMethod]
    public static void SaveCoordinates(string latitude, string longitude)
    {
        // 可将坐标保存到Session或数据库，方便后续使用
        HttpContext.Current.Session["UserLatitude"] = latitude;
        HttpContext.Current.Session["UserLongitude"] = longitude;
    }
}

关于GeoCoordinateWatcher的说明 #

你之前尝试的GeoCoordinateWatcher是.NET Framework的服务器端类，它获取的是服务器所在的地理位置，而不是用户浏览器的位置——这就是为什么它对你的需求没用，用户的位置必须在客户端通过浏览器Geolocation API获取，再传到服务器。

内容的提问来源于stack exchange，提问作者NAJEEB