Question

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

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

Answer 1

是的，你可以使用googlemaps 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

在你在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>

Answer 2

请检查googlmap原生插件：

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

我可以在Cordova混合应用中添加原生GoogleMap吗？

2 个答案: