我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？答案

【问题标题】：Can I add a native GoogleMap to my Cordova hybrid app?我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？
【发布时间】：2015-07-15 05:20:44
【问题描述】：

我可以将原生谷歌地图添加到我的科尔多瓦混合应用程序中的一个页面吗？

如果是，请说明如何（在 Android 和 iOS 中），谢谢！

【问题讨论】：

是的，你可以，只需搜索谷歌地图插件
是不是一定要cordova build它然后打开原生应用工程手动添加原生google地图代码？
不，您只需使用 cordova CLI 安装插件，一切都会正常运行（如果您找到的插件已更新为支持 cordova 3.X.X）。

标签： android ios cordova google-maps-api-2 hybrid-mobile-app

【解决方案1】：

是的，您可以使用 googlemaps api for cordova，这是一个简单的实现。在此之前，您需要从 google 生成您的 api 密钥。请在此链接中找到信息 https://developers.google.com/maps/documentation/javascript/get-api-key

这是一个使用您的 api 密钥加载地图的简单示例。 https://developers.google.com/maps/documentation/javascript/examples/map-simple

在你在 head 部分的 meta 标签中添加白名单之后，让你的 index.html 看起来像这样

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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'">
<style>
    body, html, #map {  margin: 0;width:100%;height:400px }
#map {
    position: relative;
    width:400px;
    height: :50%;
}

#map:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background-size: 22px 40px; 
   pointer-events: none; 
}

    </style>



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


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



    </script>
  </head>
  <body>
    <div id="map"></div>

  </body>
</html>

【讨论】：

【解决方案2】：

请查看 googlmap 原生插件：

https://github.com/mapsplugin/cordova-plugin-googlemaps

【讨论】：