gpt4 book ai didi

javascript - 在 Google map 上收到奇怪的列/形状

转载 作者:行者123 更新时间:2023-11-28 17:27:09 26 4
gpt4 key购买 nike

我正在尝试在 Google map 中重新创建一个基本的 Hello World。在过去的一个小时里,我一直在努力找出问题所在,但就是做不到。尝试提供 map 时,它会提供 map /卫星按钮样式不当(太大)的 map ,以及页面底部的白框。我希望按钮具有正常样式,并且白框消失。

以下是我的jsFIddle:https://jsfiddle.net/rich22/m84kwtwv/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

body, html {
height: 100%;
margin:0;
padding:0;
}

div{
height: 70%;
}
</style>

</head>

<body>

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

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap"
type="text/javascript"></script>
<script>

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: -33, lng: 151},
mapTypeControl: true,
scaleControl: true
});
}
</script>

</body>
</html>

最佳答案

您的 CSS 没有按照您的意愿行事。此规则影响所有 div 元素:

div {
height: 70%;
}

将其更改为(如果您只希望它影响“ map ”div):

#map {
height: 70%;
}

updated fiddle

代码片段:

body,
html {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 70%;
}
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: -33,
lng: 151
},
mapTypeControl: true,
scaleControl: true
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap" type="text/javascript">

关于javascript - 在 Google map 上收到奇怪的列/形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39176826/

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