Google maps 谷歌地图没有'；在Jade中看不到-HTML工作得很好
我有一个非常有趣的问题——至少对我来说是这样：）。下面您将看到jade、html和google chrome屏幕截图： home.html：Google maps 谷歌地图没有'；在Jade中看不到-HTML工作得很好,google-maps,express,pug,Google Maps,Express,Pug,我有一个非常有趣的问题——至少对我来说是这样：）。下面您将看到jade、html和google chrome屏幕截图： home.html： <html ng-app="mtn"> <head> <title>Fluid Width HTML Example </title> <!--<script src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sen
<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>
流体宽度HTML示例
模态窗口的测试|
图标
{{message}}
运行测试
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
块内容
#根
#顶栏
div（style='float:left；'）
fb：登录按钮（宽度=200'，最大行数=1'，自动\u注销\u链接=true'）
#所有内容（style='height:100%；'）
//
#谷歌地图
#图标
跨度
#标记列表
跨度
#ftests
#对话框窗口
模态窗口的测试
| |
a、 关闭（href='#'）关闭它
//
不要移除div#mask，因为您需要它来填充整个屏幕
#面具
#侧栏（ng controller='ui\u controllers'）
按钮#切换图标(ng click='切换图标（）'）图标
#测试结果
#测试（ng控制器='runtests'）
#消息（ng show='message'）{{message}
形式#测试#形式
div
按钮（ng click='reset（）'）
按钮（ng click='run（）'）运行测试
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
doctype html
html（ng app='mtn'）
头
title='title'
//
脚本（src=）http://code.jquery.com/jquery-1.9.1.js')
脚本（src='/javascripts/vendor/jquery.easing.1.3.js'）
链接（rel='stylesheet'，href='0）http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css')
链接（rel='stylesheet'，href='/stylesheets/style.css'）
脚本（src=）http://code.jquery.com/ui/1.10.4/jquery-ui.js')
脚本（type='text/javascript'，src='s）https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false')
脚本（type='text/javascript'，src='s）http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js')
脚本（type='text/javascript'，src='/javascripts/main.js'）
脚本（src='/javascripts/fb_init.js'）
脚本（type='text/javascript'，src='/javascripts/map_data.js'）
脚本（src='/javascripts/vendor/angular/angular.min.js'）
脚本（src='/javascripts/controllers/reg.js'）
脚本（src='/javascripts/controllers/login.js'）
脚本（src='/javascripts/controllers/runtests.js'）
脚本（src='/javascripts/controllers/ui_controllers.js'）
脚本（src='/javascripts/controllers/markers.js'）
脚本（src='/javascripts/vendor/angular cookies/angular cookies.js'）
脚本（src='/javascripts/map.js'）
正文（onload=“initialize（）；”）
块内容
这里的问题是，即使地图以id“googleMap”加载到div中，它也不会显示在屏幕上。当我使用HTML时，一切都很好，但当使用Jade时，除了谷歌地图之外，所有的东西都可以正常工作。这一错误的原因可能是什么？所有其他文件都很好-我在使用Jade后对它们进行了单独测试-但如果您认为问题出在这些文件上，我当然可以再次检查它们 好吧，我现在觉得有点傻。当我将html转换为Jade时，转换工具会自动将
“doctype html”{width:100%，height:100%}{width:0px，height:0px}除了这些链接之外，还有很多详细的信息，但是我试着把基本的信息放在一个容易访问的地方。也许它会帮助其他人。尝试在CSS中给出地图
位置：fixeddisplay:tableposition:absolute