gpt4 book ai didi

javascript - 未显示谷歌地图

转载 作者:行者123 更新时间:2023-11-30 12:54:59 25 4
gpt4 key购买 nike

我写了一个网页,并在其中插入了谷歌地图。但是 map 总是不显示。我尝试使用 Firebug 查看发生了什么,发现没有任何错误。

map-canvas 的 div 已被 Google Map API 正确替换,但该 div 未显示...调试了几天,还是没有解决。

    <html><head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">

<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">

<title>TaskPaneApp1</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>

<body>
<!-- Page content -->
<div id="content-header">
<div class="padding">
<h1>Welcome</h1>
</div>
</div>
<div id="content-main">
<div class="padding">
<p><strong>Add home screen content here.</strong></p>
<p>For example:</p>
<button id="get-data-from-selection">Get data from selection</button>

<p style="margin-top: 50px;">
<a href="http://go.microsoft.com/fwlink/?LinkId=276812" target="_blank">
Find more samples online...
</a>
</p>
<div style="position: relative">
<p>Hey there!</p>
<div style="position: relative; width: 100%; height: 500px">
<div id="map-canvas">
Loading...
</div>
</div>
<p>This is the end of the map</p>
</div>
</div>
</div>

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

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body></html>

最佳答案

您没有设置 map div 的尺寸,而是设置了嵌套 map 的 div 的尺寸。将高度和宽度属性添加到 div id 'map-canvas', map 应该会出现。

    <div id="map-canvas" style="width: 400px; height: 400px;">Loading...</div>

关于javascript - 未显示谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19531579/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com