PhoneGap安卓系统:谷歌地图api v3显示空白屏幕
PhoneGap Android: Google map api v3 showing blank screen
我正在使用phonegap cordova 2.9.0构建一个网络应用程序。开发的应用程序在桌面浏览器中运行良好,但当我尝试在android设备中运行应用程序时(在使用build_tool进行构建后,它显示了我的javascript生成的第一个警报。之后,只有一个空白的白色屏幕显示,其他什么都没有。
指向处的应用程序源的链接为链接。在这个应用程序中,我正在尝试使用为用户获取当前位置
navigator.geolocation
该应用程序旨在在给定的用户位置半径内,在谷歌地图中显示所有可用的比特币交易地点。
可以使用此链接下载应用程序。
更新:
我可以获得地理定位点并在警报中显示它们,但我试图用标记在地图上渲染它们,然后地图无法在android设备上渲染。(在桌面浏览器上工作)
index.html
<!DOCTYPE html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
main.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.com上查看getCurrent location的当前示例:http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#Geolocation
您会注意到没有传入任何选项,只是:navigator.geolocation.getCurrentPosition(onSuccess,onError);
我删除了我的选项,地图立即弹出。从那以后,我再也没有深入研究过,所以我不能告诉你原因,但请尝试删除你的选项,看看它是否有效。
- 谷歌地图v3标记没有显示ie8和9
- 谷歌地图停止显示点v3
- 没有显示带有Infobox PHP/SQL的Google Map API v3
- 使用Google地图API v3显示多个标记
- 谷歌地图API v3未显示
- GoogleMaps V3仅显示1个多边形
- 更改信息窗口的位置显示在谷歌地图API v3中
- Google Maps Javascript API v3 地图显示在桌面浏览器上,但不会显示在移动浏览器上
- 谷歌地图v3-将标记替换为infoWindow显示
- IE中的谷歌地图API v3不显示地图或标记
- 在Google Maps API V3中只显示一个InfoBubble
- 在谷歌地图API JS V3上显示距离用户当前位置最近的多个标记,距离30公里
- 一次显示一个标记-谷歌地图API v3
- 地图 API v3 - Chrome 和 Opera 不显示标记
- Google Maps API V3:简单标记群集未显示
- Json + 谷歌地图 v3:显示多个 json 字段
- PhoneGap安卓系统:谷歌地图api v3显示空白屏幕
- 谷歌api v3显示附近的标记在客户的道路
- 谷歌地图api v3显示一定程度的缩放标记
- 谷歌地图API v3 -显示所有可见的标记与最大缩放