无法在我的 Android 应用中显示 Google 地图答案

【问题标题】：Can't display Google Map in my Android apps无法在我的 Android 应用中显示 Google 地图
【发布时间】：2017-08-03 12:28:38
【问题描述】：

我有简单的应用程序，应用程序会显示地图。我用 Cordova 构建。我成功获取了我的位置，但没有成功显示地图。

这是我的代码：

<script>
        function onDeviceReady() {

        var options = { frequency: 3000 }; //THIS I SPECIFY INTERVAL TIME TO SEND POSITIONS
            var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 3000 });
            }


        function onSuccess(position) //IF SUCCESS
        {

        var element = document.getElementById('location_note');
        var lat=position.coords.latitude;
        var lang=position.coords.longitude;

        var myLatlng = new google.maps.LatLng(lat,lang);

        var mapOptions={center : new google.maps.LatLng(lat,lang),zoom :4,mapTypeId: google.maps.MapTypeId.ROADMAP};

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=false', function(data) {
        alamats = data.results[0];//aRRAy to capture address details
        al=alamats.formatted_address; //variable to capture Address
        });


        element.innerHTML="";//APPEND ADDRESS INFO 
         element.innerHTML = '<center><p><font color="#FFFFFF" face="arial" size="4"> ' + al + '</font><br />' + '</p></center>'; //Success to Display My Address

            }

            function onError(error) {
              alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
            }  
    </script>
    <body>
     <div id="my_location">Address Info here</div>
     <div id="map_canvas">PETA</div>
    </body>

我得到了地址信息，但地图没有显示。

【问题讨论】：

标签： javascript cordova google-maps phonegap

【解决方案1】：

为地图添加样式：

<style>
    #map_canvas {
        height: 100%;
        width: 100%;
    }
</style>

此外，由于 Google 地图不需要设备即可工作，您可以在浏览器中对其进行测试和调试。从您的应用目录执行此操作：

ionic serve -c -s

在浏览器中按 F12 并根据需要进行编辑。并且不要忘记监视Console 选项卡以查看任何可能的错误（例如您发布的代码中的错误，my_location -> location_note）。看看testing docs。

在任何情况下，我都会将应用程序简化为最低限度的表达式，以尝试使其正常工作并避免错误（删除地理定位代码、硬编码中心位置等）。

以这个plunker为例：https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=preview和google maps hello world example。

【讨论】：