<分区>
<分区>
我正在使用 Google Maps JS Api 在网站上显示 map 。该网站向我展示了一张空卡片，在检查元素时，我发现了错误:无法读取 null 的属性“offsetwidth”。
如果有人能帮助我，我将不胜感激!我在下面添加了所有相关编码。
CSS
.content {
position: fixed;
top: 15%;
width: 100%;
height: 85%;
overflow: auto;
}
.card {
width: 85%;
height: auto;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 6px #888888, 0 2px 6px #888888;
}
.card-map {
width: 100%;
height: 300px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="content">
<div class="card">
<div class="card-map"></div>
<script type="text/javascript" src="../google-maps.js"></script>
</div>
</div>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDb8GJ8wzza1nQyrYBUf4iKBzF1TcC6BXA&callback=initMap"></script>
</body>
JS
function initMap() {
var customMapType = new google.maps.StyledMapType([{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.attraction",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.business",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.government",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.medical",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.park",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.place_of_worship",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.school",
"stylers": [
{ "visibility": "off" }
]},{
"featureType": "poi.sports_complex",
"stylers": [
{ "visibility": "off" }
]},{
name: 'Custom Style'
}]);
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById("card-map"), {
zoom: 12,
center: {lat: 40.674, lng: -73.946},
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
var marker = new google.maps.Marker({
position: {lat: 40.674, lng: -73.946},
map: map,
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
window.addEventListener("load",initMap, false);
}
最佳答案
我认为问题在于您试图在页面完成加载之前(在创建 card-map 元素之前)初始化 map 。
试试这个:
删除这一行
google.maps.event.addDomListener(window, "load", initialize);
来自初始化函数
并在该函数之外添加这个函数(在全局上下文中)。
window.addEventListener("load",initialize, false);
此外，删除对 initialize 函数的所有其他调用。
关于javascript - 谷歌地图 JS API : Cannot read property 'offsetwidth' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38291778/