地图未显示在模拟器上

时间:2018-11-01 22:56:35

标签: tizen tizen-web-app tizen-emulator

我正在尝试实现一个简单的谷歌地图演示。在请求许可后,它可以完美显示在浏览器上。在tizen模拟器上,地图没有显示,并且我在右上角闪烁了一个位置图标。

这是我的代码:

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

    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>





</head>
<body>

    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>



<script>
// Initialize and add the map
function initMap() {

navigator.geolocation.getCurrentPosition(function(position) {

    console.log('Latitude: ' + position.coords.latitude  + 'Longitude: ' + position.coords.longitude);
    var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};

      var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});

}, function(error) {
    console.error('GPS error occurred');
});

  // The location of Uluru

  // The map, centered at Uluru

}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/jskey=MYKEYHERE&callback=initMap">
    </script>


</body>
</html>

这是我的配置:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/CoTakwira" version="1.0.0" viewmodes="maximized">
    <access origin="http://googleapis.com" subdomains="true"></access>
    <access origin="http://gstatic.com" subdomains="true"></access>
    <access origin="http://google.com" subdomains="true"></access>
    <tizen:application id="TIounxF6Sw.CoTakwira" package="TIounxF6Sw" required_version="3.0"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <icon src="icon.png"/>
    <name>CoTakwira</name>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/location"/>
    <tizen:profile name="mobile"/>
</widget>

这就是我在tizen模拟器上得到的东西

enter image description here

谢谢您的帮助

2 个答案:

答案 0 :(得分:0)

请按照提示文档中 this link 中所述的步骤进行操作。另外,请尝试在项目的config.xml文件中添加以下行。希望会有所帮助。

<access origin="*" subdomains="true"/>

答案 1 :(得分:0)

请在您的 config.xml

中添加它们
<access origin="*" subdomains="true"/>
<tizen:allow-navigation>*<tizen:allow-navigation/>
<tizen:content-security-policy>self</tizen:content-security-policy>

Check this了解有关定义外部访问策略的更多信息。