如何在科尔多瓦应用程序中集成谷歌地图？答案

【问题标题】：How to intgreate Google maps in cordova application?如何在科尔多瓦应用程序中集成谷歌地图？
【发布时间】：2025-11-25 07:25:02
【问题描述】：

我想在我的科尔多瓦项目中包含一个谷歌地图，所以我把这个网址 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script> 放在我的 trajet.html 中。

我的 trajet.html

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>

<div id="map_canvas">
</div>
<script type="text/javascript" src="js/trajet.js"></script>

在我的 trajet.js 中，这段代码：

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

$(document).ready(function(){


    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;
        }


});

但我没有找到任何结果，地图不显示

请帮帮我，有什么问题

【问题讨论】：

标签： javascript android jquery cordova google-maps

【解决方案1】：

1) 获取您的谷歌地图 API 密钥：

Google developer console

doc

注意：即使您使用 phongeap 在 Android 和 iOS 上进行编译，您也必须创建一个“浏览器密钥”，而不是 Android 或 iOS 密钥。

2) 经典集成

从文档中，您必须使用 api 键和回调函数调用脚本（此处为：'initMap'）：

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

来自文档：

<body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>

2) 为您的项目

trajet.html

<div id="map_canvas"></div>
<script type="text/javascript" src="js/trajet.js"></script>

trajet.js

function loadScript(callback){
    var script  = document.createElement('script');
    script.type = 'text/javascript';
    script.src  = 'https://maps.googleapis.com/maps/api/js?key='+YOUR_KEY_HERE+'&callback=showMap';
    document.body.appendChild(script);
    callback();
}

function showMap(){
    var map;
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
  }
}

function onDeviceReady(){
    loadScript(showMap);
}

3) 风格

不要忘记为您的地图定义“宽度”和“高度”，最终确定相对于 CSS 的良好定位（位置：相对或绝对）

#map_canvas{
    width:    100%;
    height:   100%;
}

如果有任何问题，请告诉我们！

【讨论】：