Xamarin.Forms(PCL)：如何将经纬度数据传入WebView的URL？

首先，假设你已经通过DependencyService成功获取到了包含Longitude（经度）和Latitude（纬度）的CustomLocation实例，接下来分三种常见场景来实现数据传递：

1. 加载URL时直接拼接查询参数 #

这是最直接的方式，把经纬度作为URL的query参数传递给网页，网页后端或前端可以直接读取这些参数。

代码示例： #

// 先获取位置实例（假设你的位置服务接口是ILocationService）
var location = DependencyService.Get<ILocationService>().GetCurrentLocation();

if (location != null && location.Longitude != 0 && location.Latitude != 0)
{
    // 对参数值进行URL编码，避免特殊字符破坏URL结构
    var encodedLongitude = Uri.EscapeDataString(location.Longitude.ToString(CultureInfo.InvariantCulture));
    var encodedLatitude = Uri.EscapeDataString(location.Latitude.ToString(CultureInfo.InvariantCulture));
    
    // 拼接目标URL，替换成你实际要加载的地址
    var targetUrl = $"https://your-target-url.com?lat={encodedLatitude}&lon={encodedLongitude}";
    
    // 加载到WebView
    yourWebView.Source = new UrlWebViewSource { Url = targetUrl };
}

注意：一定要用Uri.EscapeDataString编码参数值，尤其是当经纬度包含小数点或其他特殊字符时，能避免URL解析错误。

2. WebView页面加载完成后，动态传递参数（不刷新页面） #

如果你的WebView已经加载了页面，或者不想通过刷新URL来传递数据，可以通过WebView的JS调用能力，直接把位置数据注入到网页的JavaScript中。

步骤： #

• 首先在你的网页中定义一个接收位置的JS函数：

// 网页中的JavaScript代码
function updateUserLocation(latitude, longitude) {
    // 在这里处理收到的经纬度，比如更新地图标记、显示位置信息等
    console.log(`用户位置更新：纬度 ${latitude}，经度 ${longitude}`);
    // 你的业务逻辑代码...
}

• 然后在Xamarin代码中，等WebView加载完成后调用这个JS函数：

// 先确保WebView已经加载完成，可以通过Navigated事件判断
yourWebView.Navigated += async (sender, e) => {
    var location = DependencyService.Get<ILocationService>().GetCurrentLocation();
    
    if (location != null)
    {
        // 构造JS调用字符串，注意数值类型不需要加引号
        var jsCommand = $"updateUserLocation({location.Latitude}, {location.Longitude})";
        // 执行JS代码，Xamarin.Forms 5+推荐用EvalAsync，旧版本用Eval
        await yourWebView.EvalAsync(jsCommand);
    }
};

3. 绑定HTML内容时直接嵌入位置数据 #

如果你的WebView加载的是本地HTML字符串（而非远程URL），可以直接在HTML模板中替换占位符，把位置数据嵌入进去。

代码示例： #

var location = DependencyService.Get<ILocationService>().GetCurrentLocation();

if (location != null)
{
    // 定义HTML模板，用{0}和{1}作为占位符
    var htmlTemplate = @"
    <!DOCTYPE html>
    <html>
    <head>
        <title>用户位置</title>
    </head>
    <body>
        <h3>当前位置信息</h3>
        <p>纬度：{0}</p>
        <p>经度：{1}</p>
        <script>
            // 直接在JS中使用位置数据
            const userLat = {0};
            const userLon = {1};
            console.log(`用户位置：${userLat}, ${userLon}`);
        </script>
    </body>
    </html>";
    
    // 替换占位符，生成最终HTML内容
    var finalHtml = string.Format(htmlTemplate, location.Latitude, location.Longitude);
    
    // 加载到WebView
    yourWebView.Source = new HtmlWebViewSource { Html = finalHtml };
}

额外提醒： #

别忘了确保你的应用已经申请了位置权限！比如在Android的AndroidManifest.xml中添加ACCESS_COARSE_LOCATION或ACCESS_FINE_LOCATION权限，在iOS的Info.plist中添加NSLocationWhenInUseUsageDescription描述，否则DependencyService可能无法获取到有效的位置数据。

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