谷歌地图工作"电话间隙测试应用"但是在构建时不工作并将其作为android apk运行

时间:2016-04-24 20:08:59

标签: android jquery cordova google-maps phonegap-plugins

我是手机差距的新手,甚至是编程。所以我正在开发这个基本的电话间隙应用程序,它只是显示谷歌地图与一些选项。 当我在网络浏览器上运行它时它工作得很好,当我测试运行它时,手机间隙测试应用程序"它工作得很好,地图显示在手机上。 但是当我使用" build.phonegap.com"构建它的.apk时地图根本没有显示出来。 我已经尝试了几乎所有的东西,但它不起作用。



var map;
var faisalabad = {lat:59.913527, lng:10.751695};

function addYourLocationButton(map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0px';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0px 0px';
    secondChild.style.backgroundRepeat = 'no-repeat';
    secondChild.id = 'you_location_img';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'dragend', function() {
        $('#you_location_img').css('background-position', '0px 0px');
    });

    firstChild.addEventListener('click', function() {
        var imgX = '0';
        var animationInterval = setInterval(function(){
            if(imgX == '-18') imgX = '0';
            else imgX = '-18';
            $('#you_location_img').css('background-position', imgX+'px 0px');
        }, 500);
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                $('#you_location_img').css('background-position', '-144px 0px');
            });
        }
        else{
            clearInterval(animationInterval);
            $('#you_location_img').css('background-position', '0px 0px');
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: faisalabad
    });
    var myMarker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: faisalabad
    });
    addYourLocationButton(map, myMarker);
}

$(document).ready(function(e) {
    initMap();
}); 

#map{
    
     width: 100%;
     height:450px;
     z-index: 1;
     margin: 0;
     padding: 0;
}

<head>
   <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.2.min.js"></script>
  
 <head>
   <body>
     <div id="map"></div>
     </body>

  
&#13;
&#13;
&#13;

它完全适用于浏览器,但在Android设备上。

1 个答案:

答案 0 :(得分:0)

要使Google地图能够在Android上运行,您需要拥有适用于Android的单独API密钥。您将提供SHA1证书和正确的包名称。更多信息here