Question

我正在使用apache cordava（Phonegap）构建应用程序。我的问题是，我可以运行google map api吗？提前致谢

Answer 1

是的，你可以在你的phonegap / cordova应用程序中运行googlemaps api。首先你需要获得一个api密钥（基于浏览器而不是android）。首先生成API_KEY并使用它。

然后你需要将URL列入白名单，这是一个简单的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: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    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>

您可以在此处阅读有关googlemaps api的更多信息

https://developers.google.com/maps/documentation/javascript/examples/map-simple

你可以在这里阅读有关创建api密钥的信息

https://developers.google.com/maps/documentation/javascript/get-api-key

可以在phonegap中运行google map api吗？

1 个答案: