Question

我有一个WPF应用程序，该应用程序可以查找纬度和经度的位置，并将其显示给应用程序内的用户。该应用程序具有一个按钮，当单击该按钮时，该按钮应该使用Google Maps API打开地图并使用标记在地图上显示这些位置。

我在HTML内找到了以下脚本，到目前为止，它只是在固定位置打开地图并仅显示示例标记。

useEffect(() =>{
    setter(value)
}, [value])

所以我知道，要打开页面本身，我要做的就是：

<script>
  function initMap() {
    let myLatLng = {lat: -25.363, lng: 131.044};

    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    let marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'TITLE!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<myKey>&callback=initMap">
</script>

但是如何将WPF端找到的位置准确地传递给JS System.Diagnostics.Process.Start(pathToHtmlFile);函数呢？

Answer 1

在文件打开命令中使用GET语义。

您必须使用URI作为命令："file://pathToHtmlFile?lat=" + Lat + "&lng=" + Long"

向脚本块添加功能：

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);

并调用lat和lng的get函数。

Answer 2

另一种方法是动态生成html文件。这支持任意数量的标记（最大256到〜5000 +，取决于内存和API约束）。

将HTML文件分成两个部分，顶部和底部（请参见下面的代码），在这两个部分之间需要插入数据。

将文件的“顶部”加载到变量Output中，并在地图中心附加地图闭合数据标签} );。
然后遍历每个标记，为每个定义的标记添加新的标记Javascript变量marker0，marker1...。然后，此代码将附加到Output变量中。
“底部”被附加到Output变量中，并保存到输出文件中。此“结束”文件用function initMap(){和script标签关闭开头}，并包括带有回调的Google Map的加载脚本。
然后通过浏览器打开此保存的文件（无需传递数据）。

将html文件的顶部放置在名为topTemplate.html的新项目文件中（将“属性：编译选项”设置为“无”，然后将“复制到输出目录：如果更新则复制”）：

<script>
  function initMap() {

    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center:

注意：我从代码中删除了let myLatLng = {lat: -25.363, lng: 131.044};，我对其进行了“硬编码”（将在C＃中定义），以简化段的划分（2 vs 3）。

bottomTemplate.html中的最后一部分（与上述文件相同的属性设置）：

    }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<myKey>&callback=initMap">
</script>

然后在WPF应用程序中：

为了使事情变得容易，我定义了一个struct来容纳带有帮助器功能的标记，以构建输出字符串。

public struct Marker
{
    public float Lat;
    public float Lng;
    public string Title;

    public Marker(float lat,float lng, string title)
    {
        Lat = lat;
        Lng = lng;
        Title = title;
    }

    public string BuildHTML(int nameAppend)
    {
        return  String.Format("\n let marker{0} = new google.maps.Marker({{ position: {{lat: {1:###0.0####}, lng: {2:###0.0####}}}, map: map, title: '{3}'}}); \n", nameAppend, Lat, Lng, Title);
    }
}

{{和}}是{}的字面形式。 ###0.0###将实际数字返回到小数点后四位。如果没有此代码，则浮点数可能会用科学记数法值表示或定位为“，”分隔符，两者中的任何一个都可能与API不兼容。如果需要，可以将“＃”扩展到小数点右边以提高精度。

以下代码大部分位于打开文件的方法中，请参见注释：

// at top of file add:
using System.IO;
// rest of namespace, class definition and method opening

// Assumes all of the markers are stored in: List<Markers> markers = new List<Markers>();
// and the center of the map is stored in float lat; and float lng;

string Output = File.ReadAllText("topTemplate.html");
// Since the topTemplate ended with "center: " we must fill in the values and close the request.
Output += String.Format("{{lat: {1:###0.0####}, lng: {2:###0.0####}}} }} );\n",lat, lng);
int index = 0;
foreach(var item in markers)
{
    Output += item.BuildHTML(index++); //adds 1+ to the marker0 to form another variable marker1 ... for each marker variable name.
}
Output += "\n"; //add a vertical space to the Output. Before adding the end:
Output += File.ReadAllText("bottomTemplate.html");

 // we will assume pathToHtmlFile contains a valid filename and is in a writable directory. If not, move the path to %ProgramData% or %temp%.

File.WriteAllText(pathToHtmlFile, Output); // will overwrite the file if it exists.
// start the browser. 
System.Diagnostics.Process.Start(pathToHtmlFile);

// The remainder of the file(method remainder and close, class remainder and close...)

在客户端计算机上启动浏览器may not run，因为“部分信任的代码无法使用此成员（Process.Start）”。这是实际答案的附带说明。确保使用安装程序。

由于Javascript是与空格无关的（所有whitepace（换行符，制表符和多个空格都减少为一个空格）），因此生成的文件中的缩进将是不正确的，这不是问题。

标记列表必须声明为（类标记= new List（）;）作为类级别变量或方法的顶部。

使用markers.Add(new Marker(Latitude, Longitude, Title));（其中“纬度，经度和标题”被其各自的值（或包含它们的变量）代替）添加每个标记；在调用上面的“方法”之前。

如何将信息从WPF应用程序传递到HTML页面

2 个答案: