【问题标题】:PhoneGap Android: Google map api v3 showing blank screenPhoneGap Android:谷歌地图 api v3 显示空白屏幕
【发布时间】:2013-09-07 03:51:32
【问题描述】:

我正在使用 phonegap cordova 2.9.0 构建一个 webapp。开发的应用程序在桌面浏览器中运行良好,但是当我尝试在 android 设备中运行应用程序时(使用build_tool 构建后,它显示了我的 javascript 生成的第一个警报。之后只出现一个空白的白色屏幕。

应用程序源的链接是link。在这个应用程序中,我正在尝试使用

获取用户当前位置
navigator.geolocation

该应用旨在在给定用户位置半径的谷歌地图中显示所有可用的比特币交易地点。

可以使用这个link下载应用程序。

更新:

我能够获取地理位置点并在警报中显示它们,但是我尝试使用标记在地图上渲染它们,然后地图不会在 Android 设备上渲染。 (在桌面浏览器上工作)

index.html

<!DOCTYPE html>
<html>
  <head>
   <title>tittle</title>
   <script>
     window.location='./main.html';
   </script>
  <body>
  </body>
</html>

ma​​in.html

    <!DOCTYPE html>
<html>
<head>
<title>CoinMap</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">


<script src="js/jquery.js"></script>    
<script src="http://maps.google.com/maps/api/js?key=AIzaSyA-zLxKvbiIbO8uR20Z5DemPXYh1F3bm1M&sensor=false"></script>
<script src="js/coinmap.js"></script><!--
<script src="js/coinmap-icons.js"></script>-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="bitcoin.png" />
<meta name="keywords" content="coinmap,map,bitcoin,openstreetmap" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <!--<body onload="getCoinData()">-->
<div id="map"></div>
    <div id="count"></div>
    <script>
        alert("Getting your location....");
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(coinmap, onError, {maximumAge: 300000, timeout:10000, enableHighAccuracy : true});

            }
            else{
            alert("GeoLocation is not available.");}
        };
    </script>
</body>
</html>

coinmap.js

    function coinmap(position) {
    alert("Latitude: "  + position.coords.latitude   + "\n" +
         "Longitude:" + position.coords.longitude  + "\n");
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    loadMap(lat, lng);
}


function loadMap(latitude, longitude){

    var my_latLng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 8,
        center: my_latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var my_marker = new google.maps.Marker({
        position: my_latLng,
        map: map,
        title: 'My Position'
    });

    var markers = [];
    var user_radius = 1000000;
    $.getJSON("http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];(node[%22payment:bitcoin%22=yes];way[%22payment:bitcoin%22=yes];%3E;);out;", function (data) {

        $.each(data.elements, function (key, value) {

            var latLng = new google.maps.LatLng(value.lat, value.lon);
            var marker = new google.maps.Marker({
                'position': latLng
            });
            markers.push(marker);
        });

        // Define the circle
        var circle = new google.maps.Circle({
            map: map,
            clickable: false,
            // metres
            radius: user_radius,
            fillColor: '#fff',
            fillOpacity: .6,
            strokeColor: '#313131',
            strokeOpacity: .4,
            strokeWeight: .8
        });
        // Attach circle to marker
        circle.bindTo('center', my_marker, 'position');
        // Get the bounds
        var bounds = circle.getBounds();
        for (var i = 0; i < markers.length; i++) {
            if (bounds.contains(markers[i].getPosition())) {
                markers[i].setMap(map);
            } else {
                markers[i].setMap(null);
            }
        }

    });
}


function onError(error) {
    alert('code: ' + error.code + '\n' +
        'message: ' + error.message + '\n');
}

上面的代码在 chrome 和 firefox 以及移动浏览器中运行良好,但在使用 phonegap 构建后不能作为 wepapp 运行。任何帮助将不胜感激。

任何在地图上呈现位置的地理定位示例也会有所帮助。

【问题讨论】:

  • 您是否使用 phonegap 自己的 API 来获取地理位置?我没有看你的代码,但你看它可能是一件有趣的事情:-)
  • 是的,我使用 phonegap 自己的 api 来获取地理位置。这里描述Phonegap Geolocaton
  • @Aks 你解决你的问题了吗?我也坚持这个问题,当我试图通过try-catch在地图上放置标记或多边形时,我通常在这条线上遇到错误marker.setMap(map);,我检查了错误,错误是Object is not a Function
  • 我无法解决 phonegap 中的问题。但我能够在网站 thestartupzone.in> 上做到这一点。这个网站不完整,我正在努力。请提供有关您的问题的更多详细信息。也许一些代码 sn-p 会有所帮助。

标签: javascript android google-maps google-maps-api-3 cordova


【解决方案1】:

我遇到了同样的问题,发现问题出在传入的选项上。如果您查看 phonegap.com 上的当前示例获取当前位置:http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#Geolocation

你会注意到没有传入任何选项,它很简单:navigator.geolocation.getCurrentPosition(onSuccess, onError);

我删除了我的选项,地图随即弹出。从那以后我没有深入研究它,所以我不能告诉你原因,但请尝试删除你的选项,看看它是否有效。

【讨论】:

  • 页面清楚地将 opts 描述为可选参数 navigator.geolocation.getCurrentPosition(geolocationSuccess, [geolocationError], [geolocationOptions]);
猜你喜欢
  • 2013-05-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-21
  • 2017-09-30
  • 2018-07-19
相关资源
最近更新 更多