Question

我有简单的应用，应用会显示地图。我用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>

我收到了地址信息，但地图未显示。

Answer 1

向地图添加样式：

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

此外，由于Google地图不需要设备工作，您可以在浏览器中测试和调试它。从你的app目录执行：

ionic serve -c -s

在浏览器中按F12并根据需要进行编辑。并且不要忘记监控Console标签以查看任何可能的错误（例如您发布的代码中包含的错误，my_location - ＆gt; location_note）。看看testing docs。

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

以此羽毛球为例：https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=preview和google maps hello world example。

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

1 个答案: