Question

我已按照以下链接说明测试地图是否正在出现。所以我到第4阶段应该显示地图，但是我没有得到任何东西。（http://www.christianengvall.se/phonegap-and-google-maps/）

我添加了JS和CSS文件的所有引用，以及安装谷歌地图插件。

我在onreadyready上更改了函数，因为我已经将此函数用于其他代码，因此在单击提交按钮时应该初始化地图。原因是因为我将所有JavaScript保留在HTML页面和特定JS文件之外。

所以此刻，当我点击按钮时，什么也没发生。谁能看到我错在哪里？

HTML：

<div data-role="page" id="map" data-theme="d">
<div data-role="content">
    <input type="submit" value="View Map" onclick="return mapAPI()">
<div id="map_canvas">
</div>
    </div>

mapAPI功能：

function mapAPI(){
var map = new GoogleMap();
map.initialize();

}

googlemap.js：

function GoogleMap(){
  this.initialize = function(){
   var map = showMap();
 }
  var showMap = function(){
  var mapOptions = {
   zoom: 4,
   center: new google.maps.LatLng(-33, 151),
  mapTypeId: google.maps.MapTypeId.ROADMAP
   }
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}

}

Answer 1

Attach改为按钮的事件监听器。

<input type="submit" id="viewMap" value="View Map">

<script>
    google.maps.event.addDomListener(document.getElementById('viewMap'), 'click', mapAPI);
</script>

Answer 2

您是否将index.html的Head部分中的URL列入白名单。如果没有，这就是你如何做到的。

  <meta charset="utf-8" />

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">

使用Cordova在移动设备上显示googlemaps的简单方法

<script type="text/javascript">
    function initialize() {
      var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(-33, 151),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }



</script>

您需要使用API键才能使用Google地图，生成一个并放置参考头部分

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>

Google地图没有显示？ Cordova插件

2 个答案: