在Jade中看不到Google Maps-HTML效果很好 [英] Google Maps doesn't seen in Jade - HTML works well
问题描述
我有一个非常有趣的问题-至少对我来说:).在下面，您会看到翡翠，html和google chrome截图:
I have a very interesting problem - at least to me :). Below you'll see the jade, the html, and a google chrome screenshot:
home.html:
home.html:
<html ng-app="mtn">
<head>
<title>Fluid Width HTML Example </title>
<!--<script src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"> -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/javascripts/vendor/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/stylesheets/style.css" />
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript" src="/javascripts/main.js"> </script>
<script src="/javascripts/fb_init.js"> </script>
<script type="text/javascript" src="/javascripts/map_data.js"></script>
<script src="/javascripts/vendor/angular/angular.min.js"></script>
<script src="/javascripts/controllers/reg.js"></script>
<script src="/javascripts/controllers/login.js"></script>
<script src="/javascripts/controllers/runtests.js"></script>
<script src="/javascripts/controllers/ui_controllers.js"></script>
<script src="/javascripts/controllers/markers.js"></script>
<script src="/javascripts/vendor/angular-cookies/angular-cookies.js"></script>
<script src="/javascripts/map.js"></script>
</head>
<body onload='initialize();'>
<div id="fb-root"></div>
<div id="topbar">
<div style="float: left"><fb:login-button width="200" max-rows="1" auto_logout_link="true"></fb:login-button></div>
</div>
<div id="all_content" style="height: 100%;">
<!--<div id="output" style="color: #FFFFFF;" />-->
<div id="googleMap">
</div>
<div id="icons">
<span>
</span>
</div>
<div id="markers_list">
<span>
</span>
</div>
<div id="ftests">
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<a href="#" class="close">Close it</a>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
<div id="sidebar" ng-controller="ui_controllers">
<button id="tog_icons_but" ng-click="toggle_icons()"> << Icons </button>
</div>
</div>
<div id="tests" ng-controller="runtests">
<div id="messages" ng-show="message">{{ message }}</div>
<form id="tests_form">
<div>
</div>
<button ng-click="reset()"></button>
<button ng-click="run()">Run Tests</button>
</form>
</div>
</body>
</html>
home.jade:
home.jade:
extends layout.jade
block content
#fb-root
#topbar
div(style='float: left;')
fb:login-button(width='200', max-rows='1', auto_logout_link='true')
#all_content(style='height: 100%;')
//
<div id="output" style="color: #FFFFFF;" />
#googleMap
#icons
span
#markers_list
span
#ftests
#dialog.window
b Testing of Modal Window
| |
a.close(href='#') Close it
//
Do not remove div#mask, because you'll need it to fill the whole screen
#mask
#sidebar(ng-controller='ui_controllers')
button#tog_icons_but(ng-click='toggle_icons()') << Icons
#test_results
#tests(ng-controller='runtests')
#messages(ng-show='message') {{ message }}
form#tests_form
div
button(ng-click='reset()')
button(ng-click='run()') Run Tests
layout.jade:
layout.jade:
doctype html
html(ng-app='mtn')
head
title= 'title'
//
<script src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false">
script(src='http://code.jquery.com/jquery-1.9.1.js')
script(src='/javascripts/vendor/jquery.easing.1.3.js')
link(rel='stylesheet', href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://code.jquery.com/ui/1.10.4/jquery-ui.js')
script(type='text/javascript', src='https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false')
script(type='text/javascript', src='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js')
script(type='text/javascript', src='/javascripts/main.js')
script(src='/javascripts/fb_init.js')
script(type='text/javascript', src='/javascripts/map_data.js')
script(src='/javascripts/vendor/angular/angular.min.js')
script(src='/javascripts/controllers/reg.js')
script(src='/javascripts/controllers/login.js')
script(src='/javascripts/controllers/runtests.js')
script(src='/javascripts/controllers/ui_controllers.js')
script(src='/javascripts/controllers/markers.js')
script(src='/javascripts/vendor/angular-cookies/angular-cookies.js')
script(src='/javascripts/map.js')
body(onload="initialize();")
block content
chrome屏幕截图:
chrome screenshot:
这里的问题是，即使将地图加载为ID为"googleMap"的div，它也不会显示在屏幕上.当我使用HTML时，一切正常，但是当使用Jade时，除google maps之外的所有其他东西都不会显示.发生此错误的原因可能是什么?所有其他文件都很好-我在使用Jade之后分别进行了测试-但是，当然，如果您认为问题出在这些文件上，我可以再次进行检查. ;)
The problem here is that, even though the maps is loaded into the div with the id "googleMap", it is not shown on the screen. When I use HTML, everything works fine, but when using Jade, all the stuff works except the google maps is not being shown. What could be the reasons for this error? All other files are fine - I tested them individually after using Jade - but of course if you think that the problem is on those files, I can re-check them again. ;)
推荐答案
好的，我现在有点傻.当我将html转换为Jade时，转换工具会自动将"doctype html"放在html文档的开头.并指定了几乎所有我的CSS，因为浏览器倾向于在标准模式"下运行.这就是为什么即使我使用CSS {width: 100%, height: 100%}制作地图，也将其渲染为{width: 0px, height: 0px}(
OK, I kinda feel a bit dumb right now. When I converted the html to Jade, the conversion tool automatically put "doctype html" to the head of the html document. And with that specified almost all my CSSes are neglected, because browsers tend to operate on "standard mode". That's why, even though I made my map with CSS {width: 100%, height: 100%}, it is rendered as {width: 0px, height: 0px} (look here - "Declaring your application as HTML5").
有关所有三种浏览器(对于mozilla)模式的完整详细信息:
For full detailed information about all three browser (for mozilla) modes:
- General Info
- Quirks Mode
- Almost Standards Mode
To check your browsers rendering mode, see this answer
除了这些链接之外，还有很多详细的信息，但是我试图将基本信息放在一个位置以便于访问.也许会帮助别人.
There a lot of detailed information out there besides these links, but I tried to put the basic ones in one place to access easily. Maybe it would help someone else.
这篇关于在Jade中看不到Google Maps-HTML效果很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
