Невозможно отобразить Google Map в моих приложениях для Android

Question

Невозможно отобразить Google Map в моих приложениях для Android

1

У меня есть простые приложения, приложения покажут карту. Я строю с Кордовой. У меня есть успех, чтобы получить мое местоположение, но не удалось отобразить карту.

Вот мой код:

<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>

Я получил адресную информацию, но карта не отображается.

Def 03 авг. 2017, в 14:40

Источник

Теги:

javascript

google-maps

cordova

phonegap

1 ответ

Ещё вопросы

Gustavo Iñiguez Goia · Answer 1 · 2017-08-07T17-25-00.000Z

Добавьте стиль к карте:

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

Кроме того, поскольку Google Maps не требует, чтобы устройство работало, вы можете протестировать и отладить его в браузере. Выполните это из своего каталога приложений:

ionic serve -c -s

нажмите F12 в браузере и отредактируйте его по своему усмотрению. И не забудьте следить за вкладкой " Console ", чтобы увидеть любую возможную ошибку (например, те, что у вас есть в опубликованном вами коде, my_location → location_note). Взгляните на тестовые документы.

В любом случае я бы упростил приложение к минимальному выражению, чтобы попытаться заставить его работать и избежать ошибок (удалить код геолокации, местоположение центра жесткого кода и т.д.).

Возьмите этот плункер в качестве примера: https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=preview, а также карты google hello world.