谷歌地图没有显示?Cordova插件

Google map not displaying? Cordova plugin

本文关键字：Cordova 插件 显示 谷歌地图      更新时间：2023-09-26

我遵循了以下链接说明，只是测试是否出现了映射。所以我进入了第四阶段，地图应该显示在那里，但我什么也没得到。(http://www.christianengvall.se/phonegap-and-google-maps/)

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

我更改了ondeviceready函数，因为我已经将该函数用于其他代码，所以应该在单击提交按钮时初始化映射。这是因为我把所有的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;
}

}

将事件侦听器附加到按钮。

<input type="submit" id="viewMap" value="View Map">
<script>
    google.maps.event.addDomListener(document.getElementById('viewMap'), 'click', mapAPI);
</script>

你好，你在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 在手机上显示谷歌地图的简单方法

<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键为谷歌地图工作，生成一个并把参考头部分

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