将谷歌地图集成到WinJS中

Integrating Google Maps into WinJS

本文关键字：WinJS 集成 谷歌地图      更新时间：2023-09-26

我对HTML, JS和CSS非常陌生，所以我从JS的基础教程开始，直接进入WinJS。然后我按照这个教程的GoogleMaps: http://www.creepyed.com/2012/11/how-to-use-the-google-maps-api-on-windows-8/

然后我试图将它合并到我的项目中，这就是我被卡住的地方。在我的itemDetail.html中，我有一个<iframe>，当项目运行时，它的区域变成白色，然后是黑色，什么也没有显示。

<!--- itemDetail.html --->
<!DOCTYPE html>
<html>
<head>
    <meta content="charset=utf-8"/>
    <title>itemDetailPage</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <!-- Google Maps API reference -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/itemDetail/itemDetail.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="content" aria-label="Main content" role="main">
            <article>
                <div>
                    <header>
                        <h2 class="item-title"></h2>
                        <h4 class="item-subtitle"></h4>
                    </header>
                    <iframe id="Map" src="ms-appx-web:///map/map.html" height="400" width="600"></iframe>
                    <div class="item-content"></div>
                </div>
            </article>
        </div>
    </div>
</body>
</html>

此<iframe>连接到map.html。

<!--- map.html --->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <!-- Google Maps API reference -->
    <script
        src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
    </script>
    <!-- mapframe references -->
    <link href="/map/map.css" rel="stylesheet" />
    <script src="/map/map.js"></script>
    <!-- USGS URL data source 
    <script src="http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week"></script>
    -->
</head>
<body>
        <div id="mapdisplay"></div>
</body>
</html>

使用map.js

//map.js
var map;
var dataResults;
function initialize() {
    map = new google.maps.Map(document.getElementById('mapdisplay'), {
        zoom: 3,
        center: new google.maps.LatLng(40, -187.3),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    addMarkers();
}
function addMarkers() {
    var latLong = new google.maps.LatLng(40, -187.3);
    var marker = new google.maps.Marker({
        position: latLong,
        map: map
        //icon: getCircle(earthquake.properties.mag)
    });
}
function getCircle(magnitude) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: .2,
        scale: Math.pow(2, magnitude) / Math.PI,
        strokeColor: 'white',
        strokeWeight: .5
    };
}
google.maps.event.addDomListener(window, 'load', initialize);

我从教程中删除了数据收集，现在只是硬编码了后期和长时间。一旦我弄清楚这一点，我必须从itemDetail.js中获取数据，并以某种方式将其获取到map.js中，因为我的JSON中有后期和长数据。

提前感谢您的帮助

不确定这是否可行，但请确保在iframe上使用x-ms-webview。

相关文章：