无法在 Tizen 可穿戴 Web 应用程序中显示 OpenStreepMap答案

【问题标题】：Unable to show OpenStreepMap in Tizen wearable web application无法在 Tizen 可穿戴 Web 应用程序中显示 OpenStreepMap
【发布时间】：2017-05-21 13:30:28
【问题描述】：

我正在尝试使用 Tizen 在可穿戴模拟器上使用 OpenLayers 打开 OpenStreetMap。

HTML

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,user-scalable=no">
   <title>Circular UI</title>
   <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
   <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" 
href="lib/tau/wearable/theme/default/tau.circle.min.css">
   <!-- load theme file for your application -->
   <link rel="stylesheet" href="css/style.css">
  </head>
<body>
<div class="ui-page ui-page-active" id="main">
  <header class="ui-header">
    <h2 class="ui-title">TAU Basic</h2>
  </header>
  <div class="ui-content content-padding">
    <p>test </p>
    <div id="map"></div>
  </div>
</div>
  <script src="ol.js"></script>
  <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
  <script src="jquery-3.2.1.min.js"></script>
  <script src="app.js"></script>
  <script src="lowBatteryCheck.js"></script>
</body>
</html>

app.js

$(function(){
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map' 
});

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/OSMOL" 
version="1.0.0" viewmodes="maximized">
  <access origin="*" subdomains="true"/>
  <access origin="http://openlayers.org/" subdomains="true"/>
  <access origin="https://openstreetmap.org/" subdomains="true"/>
  <content src="index.html"/>
  <feature name="http://tizen.org/feature/screen.size.normal"/>
  <icon src="icon.png"/>
  <name>OSMOL</name>
  <tizen:privilege name="http://tizen.org/privilege/internet"/>
  <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
  <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
  <tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
  <feature name="http://tizen.org/feature/location.gps"/>
  <tizen:privilege name="http://tizen.org/privilege/location"/>
  <tizen:profile name="wearable"/>
  <tizen:setting hwkey-event="enable"/>
</widget>

在普通 Web 应用程序中测试代码时，地图会显示，但在将 Tizen 作为可穿戴地图运行时，它不会显示。

调试时出现此错误：

获取https://c.tile.openstreetmap.org/2/1/1.png net::ERR_NAME_RESOLUTION_FAILED c.tile.openstreetmap.org/2/2/2.png:1 获取https://c.tile.openstreetmap.org/2/2/2.png net::ERR_NAME_RESOLUTION_FAILED b.tile.openstreetmap.org/2/1/2.png:1 得到 另外 2 个相同，无法发布应有的声誉

我认为这是 config.xml 访问的问题。我尝试了很多东西，包括将这些链接添加到<access origin>。没有任何效果，我完全陷入困境。

任何帮助或提示将不胜感激！

【问题讨论】：

在 Jquery 之后 app.js 之前添加你的 ol.js

标签： javascript openlayers openstreetmap tizen tizen-web-app

【解决方案1】：

在模拟器上运行它怎么样？我怀疑有连接问题

当我开始将移动应用移植到可穿戴设备上时，我认为它没有黑魔法：

https://github.com/tizenteam/mapo/tree/tizen-2.3-wearable

【讨论】：

【解决方案2】：

我想通了，好像Tizen莫名其妙地屏蔽了正常的OL CDN，用这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.1/ol.js"</script>

相反，它应该可以正常工作！

感谢大家的帮助。

【讨论】：