[英]Can't view Google Maps in HTML, Cordova
I'm trying to displayGoogle Maps on a html page in cordova. 我想在Cordova的html页面上显示Google Maps。 The example code I'm trying to replicate is this one: https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=it Here is my code: HTML: 我要复制的示例代码是以下代码: https : //developers.google.com/maps/documentation/javascript/examples/map-simple?hl=it这是我的代码:HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src=js/jquery-1.11.1.min.js></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="js/google_map.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
index.js (I used some alert() and every method was called) index.js(我使用了一些alert(),并且每个方法都被调用了)
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
toIndex();
}
};
$(document).ready( function(){
app.initialize();
});
function toIndex(){
google_map.init();
}
google_map.js the class which take care of the map google_map.js负责处理地图的类
var google_map = (function(){
var _map;
var _$map_canvas;
function init(){
_$map_canvas = $('.app').find('#map-canvas');
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function getMap(){
return _map;
}
return {
init:init,
getMap:getMap
}
})();
and the index.css file 和index.css文件
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
} }
Instead of displaying the map, I see a white page. 我没有显示地图,而是看到白页。
Second question: code here: http://jsfiddle.net/qbddfdk7/1/ This one doesn't work too, the problem is at line 14: if I change it from 第二个问题:这里的代码: http : //jsfiddle.net/qbddfdk7/1/这个也不起作用,问题出在第14行:如果我将其更改为
map = new google.maps.Map(map_canvas, mapOptions);
to 至
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
It will work, but I can't undesrstand why. 它将起作用,但是我无法理解为什么。
The problem with your second question is a timing issue. 第二个问题是时间问题。
You see, your inline javascript is in the <head>
, so at the time var map_canvas = document.getElementById('map-canvas');
您会看到,您的嵌入式javascript在<head>
,因此在那时var map_canvas = document.getElementById('map-canvas');
runs, the element with the id map-canvas
is not loaded yet, so var map_canvas
is set to null. 运行时,尚未加载ID为map-canvas
的元素,因此var map_canvas
设置为null。
Moving the <script>
tag to the bottom of the <body>
element solves this issue. 将<script>
标记移到<body>
元素的底部即可解决此问题。 I've updated your jsFiddle accordingly. 我已经相应地更新了您的jsFiddle。
As for your first issue, try Chrome Remote Debugging if available, or weinre . 至于第一个问题,请尝试Chrome远程调试(如果可用),或者weinre 。 These will help you find the source of your problem. 这些将帮助您找到问题的根源。
I've had no luck using their recommendation to use percentages for the map-canvas. 我对使用他们的建议在地图画布上使用百分比没有好运。 To ensure everything is working fine, hard-code the div tag to a fixed width and height. 为确保一切正常,请将div标签硬编码为固定的宽度和高度。
Once you have the map displayed, then you'll need to write javascript to adjust the style width and height during the pagecreate or pageinit. 显示地图后,您将需要编写JavaScript来在pagecreate或pageinit期间调整样式的宽度和高度。 You can then change the same properties during the orientationchange event. 然后,您可以在directionchange事件期间更改相同的属性。
There are several articles on the best way to find the screen size. 有几篇文章介绍了查找屏幕尺寸的最佳方法。 I'm using: 我正在使用:
function effectiveDeviceWidth(factor) {
var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceWidth = deviceWidth / window.devicePixelRatio;
}
return parseInt(deviceWidth) * factor + 'px';
}
function effectiveDeviceHeight(factor) {
var deviceHeight = window.orientation == 0 ? window.screen.height : window.screen.width;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceHeight = deviceHeight / window.devicePixelRatio;
}
return parseInt(deviceHeight) * factor + 'px';
}
$('#map-canvas').width(effectiveDeviceWidth(.8));
$('#map-canvas').height(effectiveDeviceHeight(.6));
Hope this helps. 希望这可以帮助。
The problem was in the css, in eclipse I corrcted the css to this: 问题出在css中,在eclipse中,我将css修正为:
html, body, #map-canvas {
height: 100%;
width: 100%;
position: relative;
z-index: -1;
margin: 0px;
padding: 0px
}
I'm new to web languages and I didn't know that I had to write css even for the hmtl and the body tag, as you can see those tag are missing from the code in the question. 我是网络语言的新手,甚至不知道我是否必须为hmtl和body标签编写css,因为您可以看到问题代码中缺少这些标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.