个人中心
gpt4 book ai didi

HTML 和谷歌地图

转载 作者：太空宇宙 更新时间：2023-11-04 14:13:57 26 4
gpt4 key购买 nike

这里是一个简单的问题。我正在学习 Web 开发，我想创建一个带有标题的边框，我想在它下面放一个谷歌地图 View 。这是我的 css 文件“mystyle.css”中的内容:

html{
height: 100%;   
}

div.map{
height: 50%;
width: 50%;
}

div.title{
width: 100%;
height: 100%;
border: 5px solid blue;
margin: 0px; 
text-align: center;
}

#map-canvas { 
height: 50%;
width: 50%;
}

然后在我的 index.html 上，这是我拥有的:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps Hello World</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?MY_MAP_KEY&sensor=false">
</script>

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

</head>

<body>
    <div class="title"><h1>Google Maps Test</h1></div>
    <div id="map-canvas"/>
</body>

我的问题是，我只能看到带有文本“Google Maps Test”的蓝色边框，我看不到 map View 。奇怪的是，如果我将 div.title 重命名为 body，那么我就可以看到 map 了。知道我做错了什么吗？

最佳答案

尝试使用

#map-canvas {
    height:300px;
    width:300px;
}

代替

#map-canvas { 
height: 50%;
width: 50%;
}

并使用 <div id="map-canvas"></div>

代替

<div id="map-canvas"/>

关于HTML 和谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20511546/

26 4 0
文章推荐： html - 为什么
在 HTML 中的厚度与 CSS 不同？
文章推荐： html - Angular Material Design 布局 ="row"内容与窗口重叠
文章推荐： jQuery 传递回车
文章推荐： html - 如何添加法国商标符号 (MC)？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com