简体   繁体   English

无法以HTML格式查看Google地图,科尔多瓦

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM