Phonegap 不会在手机中显示谷歌地图答案

【问题标题】：Phonegap wont display google map in the phonePhonegap 不会在手机中显示谷歌地图
【发布时间】：2015-12-21 10:22:31
【问题描述】：

    <html>
<head>
    <title>Geolocation watchPosition() by The Code of a Ninja</title>

    <!-- for mobile view -->
    <meta content='width=device-width, initial-scale=1' name='viewport'/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        // you can specify the default lat long
        var map,
            currentPositionMarker,
            mapCenter = new google.maps.LatLng(14.668626, 121.24295),
            map;

        // change the zoom if you want
        function initializeMap()
        {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 18,
               center: mapCenter,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });
        }

        function locError(error) {
            // tell the user if the current position could not be located
            alert("The current position could not be found!");
        }

        // current position of the user
        function setCurrentPosition(pos) {
            currentPositionMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ),
                title: "Current Position"
            });
            map.panTo(new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ));
        }

        function displayAndWatch(position) {

            // set current position
            setCurrentPosition(position);

            // watch position
            watchCurrentPosition();
        }

        function watchCurrentPosition() {
            var positionTimer = navigator.geolocation.watchPosition(
                function (position) {
                    setMarkerPosition(
                        currentPositionMarker,
                        position
                    );
                });
        }

        function setMarkerPosition(marker, position) {
            marker.setPosition(
                new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude)
            );
        }

        function initLocationProcedure() {
            initializeMap();
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
            } else {
                // tell the user if a browser doesn't support this amazing API
                alert("Your browser does not support the Geolocation API!");
            }
        }

        // initialize with a little help of jQuery
        $(document).ready(function() {
            initLocationProcedure();
        });
    </script>
</head>

<body style="margin:0; padding:0;">

    <!-- display the map here, you can changed the height or style -->
    <div id="map_canvas" style="height:25em; margin:0; padding:0;"></div>
</body>

</html>

上面在我的智能手机上运行的代码不会出现谷歌地图，但是当我在本地主机上运行它时，它确实会出现地图并且还能够获取当前位置谁能帮我解决正在发生的事情

<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

当我运行此代码时，它能够在我的智能手机中显示谷歌地图，我不知道出了什么问题，我现在很困惑，谁能帮助我

【问题讨论】：

标签： javascript cordova google-maps phonegap-plugins

【解决方案1】：

您需要获得一个 google API 密钥：

https://developers.google.com/api-client-library/python/guide/aaa_apikeys

然后在脚本标签中将 YOUR_API_KEY 替换为您的 API 密钥：

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

【讨论】：

我试过不使用 api 密钥，底部的仍然可以正常工作，但上面的不能工作，不知道为什么