我可以將本地GoogleMap添加到我的Cordova混合應用程序中嗎？

Question

我可以將原生Google地圖添加到Cordova混合應用程序中的頁面之一嗎？

如果是，請指出操作方式（在Android和iOS中），謝謝！

Answer 1

是的，您可以使用適用於cordova的googlemaps api，這是一個簡單的實現。 在此之前，您需要從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>

Answer 2

請檢查googlmap本機插件：

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

我可以將本地GoogleMap添加到我的Cordova混合應用程序中嗎？

問題描述

2 個解決方案

解決方案1
1 2016-03-31 10:52:56

解決方案2
0 2016-09-18 18:24:31

我可以將本地GoogleMap添加到我的Cordova混合應用程序中嗎？

問題描述

2 個解決方案

解決方案1 1 2016-03-31 10:52:56

解決方案2 0 2016-09-18 18:24:31

解決方案1
1 2016-03-31 10:52:56

解決方案2
0 2016-09-18 18:24:31