在Windows Store应用程序（C#/XAML）中使用Google地图 - 无法缩放

Question

在Windows Store应用程序（C#/XAML）中使用Google地图 - 无法缩放

google-maps-api-3windows-store-appswinrt-xaml

4

有人能够成功地在Windows Store应用程序（C#/XAML）中包含Google Maps视图吗？我们选择了Google Maps，因为Bing Maps许可证的成本较高（尽管Bing Maps有一个原生的Metro控件，这将更容易）。

我能够按照this article的方法，在WebView控件中包含一个html页面。我还可以使用ScriptNotify和window.external.notify与我的C#类进行通信。

然而，捏合缩放手势无法被识别，因为它不会对地图进行缩放。

这是我的WebView。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="GridOut">
        <WebView x:Name="MapWebView" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled" ManipulationMode="All" />
    </Grid>
</Grid>

和带有地图的HTML页面：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" /> <!-- To get double tap for zoom to work-->
    <!– Google Maps API reference –>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
    <script type="text/javascript" src="libs/richmarker.js"></script>
    <script type="text/javascript" src="CountryInfo.js"></script>
    <script type="text/javascript" src="libs/infobox.js"></script>
    <!– map references –>
    <link href="map.css" rel="stylesheet" />
<script src="map.js"></script>
</head>
<body>
    <div id="mapdisplay" />
</body>
</html>

然而，如果我在IE中打开我的HTML页面（即使使用Visual Studio模拟器中的IE），捏合缩放手势就会出现并且运行顺畅，所以我认为问题出在WebView上。另一方面，如果我将我的WebView导航到这个URL，捏合缩放功能就会起作用，所以这真的让我感到困惑。

我还尝试过：

1）在额外的HTML页面中使用IFrame，但没有改变任何东西。

2）实现自己的JavaScript手势识别器来进行缩放（使用MSGestureChange），但结果远非理想，我感觉自己正在“重新发明一个非常糟糕的轮子”...

有人遇到过这个问题吗？

提前致谢。

- bpires

1

可以尝试的一件事是将-ms-content-zooming添加到您的地图脚本中。 - Nate Diamond

你好Nate。谢谢你的建议。我已在文档主体和实际地图div上应用了CSS，但我没有注意到任何区别。没有缩放。我不明白为什么正常浏览器上的捏合缩放效果很好。 - bpires

很遗憾，你可能运气不佳。WebView并不是一个完整的浏览器，它只能在文档模式下呈现页面。你可能需要做的是添加手势识别器，就像你建议的那样。但是，你可以在C#/Xaml中完成这个操作，然后使用ScriptNotify指令JavaScript该怎么做。这也会使调试/测试变得更容易一些。 - Nate Diamond

1

再次感谢你，Nate。我实际上直接在JavaScript上处理了Pinch手势，以避免重新实现所有其他手势（拖动用于平移，双击等）。我在下面发布了我的解决方案，奇怪的是，多点触控可以在实际的WebView中捕获，这让我相信这可能与Google Maps v3 api有关。 - bpires

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bpires · Accepted Answer

这是我目前实现的效果，但与谷歌地图的缩放相差甚远，因为：

1）谷歌地图的捏合缩放不仅会跳转到一个缩放级别，还会对瓦片进行缩放以实现平滑动画/过渡。

2）根据用户在屏幕上应用缩放的位置，它也会倾向于向该区域平移（假设您的中心点位于LatLong 0,0，缩放级别为2。如果用户在北极捏合，则缩放级别应增加，并随着继续缩放而逐渐向北极平移）。

var mGesture = new MSGesture();

function InitGestureHandler()
{

    var mapDiv = document.getElementById('mapdisplay');
    mGesture.target = mapDiv;

    // You need to first register to MSPointerDown to be able to
    // have access to more complex Gesture events
    mapDiv.addEventListener("pointerdown", pointerdown, false);
    mapDiv.addEventListener("MSGestureChange", manipulateElement, false);

}

function manipulateElement(e) {

    //Can also add timestamps here to allow the code to run only every so milliseconds
    if (e.scale > 1.05) {
        map.setZoom(currentZoomLevel + 1);
    }
    else if (e.scale < 0.95) {
        map.setZoom(currentZoomLevel - 1);
    }
}