Question

当用户登录时，我想显示地图。

基础html：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/static/main.css" />

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-20, 110),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<title>myapp</title>
</head>

<body>
{% block content %}
{% endblock %}
</body>

</html>

mainpage.html：

{% extends "base.html" %}
{% block content %}
<div id="map-canvas"/>
{% endblock %}

当我加载主页时，地图根本不显示。我查看了正确显示<div id="map-canvas"/>的页面源代码，因此正在加载地图，但它没有显示。然后我添加了一些文字

{% extends "base.html" %}
{% block content %}
<div id="map-canvas"/>
<div>derp<div>
{% endblock %}

derp也显示在源代码中，但一切仍然是空白的。怎么了？

Answer 1

您需要调整map-canvas div的大小，如文档中所述。

Answer 2

div不是所谓的empty element（例如li, option , img），它需要一个结束标记（当它没有任何内容时）：

<div id="map-canvas"></div>

这就是为什么你看不到“derp”的原因，因为地图上的问题看到了bruno desthuilliers的答案。

当我尝试使用谷歌地图api显示地图时，页面变为空白

2 个答案: