无法在 Tizen 可穿戴 Web 应用程序中显示 OpenStreepMap
Unable to show OpenStreepMap in Tizen wearable web application
我正在尝试在使用 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 作为可穿戴地图时,它不显示。
我在调试时遇到这个错误:
GET https://c.tile.openstreetmap.org/2/1/1.png
net::ERR_NAME_RESOLUTION_FAILED c.tile.openstreetmap.org/2/2/2.png:1
GET https://c.tile.openstreetmap.org/2/2/2.png
net::ERR_NAME_RESOLUTION_FAILED b.tile.openstreetmap.org/2/1/2.png:1
GET
2 more of the same, cant post due reputation
我认为这是 config.xml 中访问的问题。我尝试了很多东西,包括将这些链接添加到 <access origin>
。什么都没用,我完全卡住了。
如有任何帮助或提示,我们将不胜感激!
在模拟器上 运行 怎么样?我怀疑连接问题
当我开始将移动应用程序移植到可穿戴设备时,我认为它没有黑魔法就成功了:
我明白了,似乎 Tizen 以某种方式阻止了正常的 OL CDN,使用这个
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.1/ol.js"</script>
相反,它应该工作正常!
感谢大家的帮助。
我正在尝试在使用 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 作为可穿戴地图时,它不显示。
我在调试时遇到这个错误:
GET https://c.tile.openstreetmap.org/2/1/1.png net::ERR_NAME_RESOLUTION_FAILED c.tile.openstreetmap.org/2/2/2.png:1 GET https://c.tile.openstreetmap.org/2/2/2.png net::ERR_NAME_RESOLUTION_FAILED b.tile.openstreetmap.org/2/1/2.png:1 GET 2 more of the same, cant post due reputation
我认为这是 config.xml 中访问的问题。我尝试了很多东西,包括将这些链接添加到 <access origin>
。什么都没用,我完全卡住了。
如有任何帮助或提示,我们将不胜感激!
在模拟器上 运行 怎么样?我怀疑连接问题
当我开始将移动应用程序移植到可穿戴设备时,我认为它没有黑魔法就成功了:
我明白了,似乎 Tizen 以某种方式阻止了正常的 OL CDN,使用这个
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.1/ol.js"</script>
相反,它应该工作正常!
感谢大家的帮助。