使用 webview 在 windows phone 8.1 中加载 google 地图

Question

我创建了一个示例应用程序以在 windows phone 8.1 中加载 google 地图。使用 webview approch 我无法启动 google 地图，请帮助我解决这个问题。下面是代码：

default.html:

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8" />
<title>Maps</title>

<!-- WinJS references -->
<!-- At runtime, ui-themed.css resolves to ui-themed.theme-light.css or ui-themed.theme-dark.css 
based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

<!-- Maps references -->
<link href="/css/default.css" rel="stylesheet" />    
<script src="/js/default.js"></script>

</head>
<body>
<h1>Google Maps API on Windows phone 8.1</h1>
<x-ms-webview id="Map" src="ms-appx-web:///map.html" style="width:500px;height:500px;"></x-ms-webview>
</body>
</html>

maps.html:

<!DOCTYPE html>
<html>
<head>
<title></title>


<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

<!-- map references -->
<link href="/map.css" rel="stylesheet" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
<script src="/map.js"></script>    
</head>

<body>
<div id="mapdisplay" height="500px" width="500px"></div>    
</body>
</html>

maps.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();
}

eqfeed_callback = function (results) {
   dataResults = results;
}

function addMarkers() {
  for (var i = 0; i < dataResults.features.length; i++) {
    var quake = dataResults.features[i];
    var coors = quake.geometry.coordinates;
    var latLong = new google.maps.LatLng(coors[1], coors[0]);
    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
  };
 }

我在上面的代码中做错了什么，请让我知道..

Answer 1

由于多个同步问题，

"maps.html" 不起作用。

在http://maps.googleapis.com/maps/api/js之前加载maps.js所以initialise被定义，
加载 http://maps.googleapis.com/maps/api/js 并在 HTML 被解析之后 mapdisplay 元素在调用 initialise 时存在。
从 eqfeed_callback 而不是 initialise 调用 addMarkers 所以 dataResults 已经设置了有效的对象数据。

在桌面浏览器中查看 "maps.html" 时，可以通过打开开发人员控制台并检查错误来发现大部分问题。您可能还想研究有关该主题的其他问题 and/or 查看 api 文档中的工作示例 - 并注意 api 文档如何使用 defer 和 async脚本标记上的属性以确保它在页面被解析之前不会执行。

使用 webview 在 windows phone 8.1 中加载 google 地图

loading google maps in windows phone 8.1 using webview

javascript

google-maps

webview

windows-phone-8.1