Question

我是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);

我从教程中删除了数据收集，并且刚刚对lat进行了硬编码。一旦我搞清楚这一点，我必须从itemDetail.js中获取数据并以某种方式将其传递给map.js，因为我的JSON中包含lat和long数据。

提前感谢您的帮助。

Answer 1

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

将Google地图集成到WinJS中

1 个答案: