google-maps - 谷歌地图 API 不会显示
问题描述
我无法在我的视图中获取谷歌地图
代码
// html
<div id="map"></div>
// css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
// scripts
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=PLACED MY CODE HERE... &callback=initMap"></script>
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
结果
我的视图中没有显示任何内容,并且控制台或网络选项卡中没有错误。
任何想法?
解决方案
尝试使用有效的宽度,例如:(仅用于测试)
// css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 640px;
width:800px;
}
推荐阅读
- java - 如何从 \n \t 等中清理字符串?
- regex - 正则表达式测试字符串是否同时包含大写和小写字母
- spring-data-jpa - JPA Pageable 似乎在访问列表中的多个结果后获取所有行
- c# - EF Core - ContainsAsync 验证失败。重复的寄存器
- websphere - 仅在 Websphere 上排除来自特定 IP 的 404 错误
- properties - reified rdf 三元组中的 SPARQL 属性路径
- php - 按发布的自定义帖子数量顺序获取 wordpress 作者
- r - 用于分隔 R 中两个人之间的聊天的正则表达式
- vba - VBA Word“for each”循环在查看修订集合时无限循环
- aws-lambda - 如何在 AWS Cognito 的 Migrate User Lambda 触发器中操作电子邮件地址