当前位置: 首页 > 知识库问答 >
问题:

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

阎晔
2023-03-14

我可以在cordova hybrid应用程序的其中一个页面上添加本地谷歌地图吗?

如果是,请说明如何(在Android和iOS),谢谢!

共有2个答案

阎声
2023-03-14

请检查googlmap本机插件:

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

夏知
2023-03-14

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

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

制作索引。html是这样的,当你在head部分的meta标签中添加了白名单之后

<!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> 
 类似资料:
  • 我有一个完全使用Android Studio开发的应用程序。我需要创建第二个应用程序,这个我想用phonegapp来完成。这两个应用程序相互关联...所以理想情况下,我想将它们合并到同一个应用程序中...合并并不意味着它们需要一起工作。我希望它们一起下载(作为同一个应用程序),并且能够在应用程序中从一个下载到另一个...所以它们可以完全是两个独立的应用程序,但用户会认为它只是一个应用程序。我希望我

  • 我想在我的应用程序中添加带有,但一旦我将插件添加到我的应用程序中。yaml,我的应用程序不再运行。下面是错误 失败:生成失败,出现异常。 > 错误:任务执行失败:app:transformDexArchiveWithExternalLibsDexMergerForDebug'。 通用域名格式。Android建设者德兴。DexArchiveMergerException:合并dex存档时出错:/Us

  • 我尝试使用和将添加到中,但无法将添加到中。我正在使用NetBeans和后端MySQL。请帮帮我. 编辑:谢谢,但我不知道如何分组。你能帮帮我吗?我有4列。第一列单元格包含项目名称,第二列单元格包含数量,第三列和第四列单元格连接JRadio按钮。然后我想在每一行中分组包含JRadio按钮的第三列和第四列单元格 编辑:如果我试图通过使用这个在jTable的自定义代码中添加radiobutton, ,那

  • 我可以用这样的代码在市场上发布我的应用程序吗 我阅读那个严格模式只是为了调试,当我发布应用程序时,我必须删除它。

  • 如何添加图像并将其设置为我的应用程序背景 我知道你把你想要的图片粘贴到了drawable文件夹中。这是代码本身的问题,还是我应该创建一个RelativeLayout?或者仅仅是提供的代码中的一行更改? 这是我的代码,没有任何改动。

  • 我正在编写一些从第三方库扩展类的JUnit测试。超级类扩展了,所以根据定义,我的子类也扩展了。 在我的子类中,我用前缀编写测试方法,然后执行这些方法。 但是,出于许多原因,我们希望转移到JUnit4(其中一个原因是,我们不希望必须在测试方法前缀) 我尝试过使用JUnit4注释简单地编写新测试,但这些方法没有得到执行。 例如: 不扩展第三方测试类不是一个选项。(值得注意的是,Spring的又扩展了其