Google Maps JS API Windows Phone Cordova

Question

So i am trying to make this app that uses Google maps API. 因此，我正在尝试制作使用Google Maps API的应用。 It worked with android but when i tried it on Windows Phone Emulator it says "an app can't load remote web content in the local context". 它适用于Android，但当我在Windows Phone模拟器上尝试它时，它说“一个应用程序无法加载本地上下文中的远程Web内容”。 Now, i searched a bit and this is to be expected (I also tried the solution that uses an iframe - didn't work.). 现在，我搜索了一下，这是预期的（我也尝试过使用iframe的解决方案 - 没有用。）。 The question is how do i fix this.Is it possible to use Google Maps with Windows Phone and Cordova and or i have to use a different Maps API? 问题是如何解决这个问题。是否可以将谷歌地图用于Windows Phone和Cordova，或者我必须使用不同的Maps API？

Code that works with android but not with WP: -- Thank you All. 适用于Android但不适用于WP的代码： - 谢谢大家。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content=" ">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>BlankCordovaApp1</title>

    <!-- BlankCordovaApp1 references -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />

    <script src="scripts/jquery-2.1.4.js"></script>
    <script src="scripts/jquery.mobile-1.4.5.js"></script>

    <script>
        $(document).on("pagecreate","#map-page", getMaps);

        function createMap() {
            console.log("Reached createMap() ")
            var mapOptions = {
                center: new google.maps.LatLng(37.98392, 23.71889),
                zoom: 11
            };
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }

        function getMaps() {
            $.getScript('http://maps.googleapis.com/maps/api/js?callback=createMap');
            console.log("Got Maps");
        }

    </script>


</head>
<body>
    <!--Page 1-->
    <div data-role="page" id="login" data-theme="b">
        <div data-role="content">
            <p>Page 1</p>
            <a href="#map-page" class="ui-btn">Page 2</a>
        </div>
    </div>

    <!--Page 2-->
    <div data-role="page" id="map-page">
        <div data-role="header">
            <h1> Header </h1>
        </div>
        <div data-role="content">
            <div id="map" style="height: 400px;width: 100%"></div>
            <a href="#" class="ui-btn" data-rel="back">Go Back</a>
        </div>
        <div data-role="footer" style="text-align:center" data-position="fixed">
            <p> Footer </p>
        </div>
    </div>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
</body>
</html>

Answer 1

Make sure you have the right capabilities in your Manifest file. 确保您在Manifest文件中具有正确的功能。 I don't do windows phpne 8 but most of the time your app needs premission from the user to have access to the internet. 我不做Windows phpne 8，但大多数时候你的应用程序需要从用户预先允许访问互联网。

Properties/WPAppManifest.xml

<Capabilities>
    <Capability Name="ID_CAP_NETWORKING" />
</Capabilities>

Google Maps JS API Windows Phone Cordova

问题描述

1 个解决方案

解决方案1
0 2015-08-07 15:53:31

Google Maps JS API Windows Phone Cordova

问题描述

1 个解决方案

解决方案1 0 2015-08-07 15:53:31

解决方案1
0 2015-08-07 15:53:31