Google Maps JS Api:无法读取null[duplicate]的属性“offsetwidth”
我正在使用GoogleMapsJSAPI在网站上显示地图。该网站向我展示了一张空卡片，在检查元素时，我发现了错误：无法读取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);
}
共有2个答案
我发现了问题：我使用的是类而不是id。在css和html中将类更改为id确实解决了问题。
我认为问题在于，您试图在页面完成加载之前（在卡映射元素创建之前）初始化映射。
试试这个：
删除此行
google.maps.event.addDomListener(window, "load", initialize);
从初始化功能
并在该函数之外添加此函数（在全局上下文中）。
window.addEventListener("load",initialize, false);
此外，删除对初始函数的所有其他调用。
-
问题内容： 您好，我正在尝试将React-Router与Firebase配合使用。但这给了我这个错误。 无法读取null的属性“ props” 这正是代码，我正在使用我的react-router 向下代码在组件上作为loginpanel组件。 我的react路由器在main.jsx上声明，我的react-router看起来像这样。 问题答案： 在回调中，指针不再指向您的React组件。有很多方法可
-
我收到以下JavaScript错误： TypeError：无法读取null的属性“title” 代码如下： mds-iMac： cmscart imac$nodemo app[nodemo] 1.11.0[nodemo]随时重启，输入[nodemo]观看：.[nodemo]启动（node： 2274）DeprecationWarning：在猫鼬中被弃用 [nodemon]应用程序崩溃-正在等待文件
-
我在我的Gatsby应用程序中得到了这个错误，该应用程序为作者提取places数据。当author.social的map（）点为null时，该错误将显示 谢谢
-
我有一个坦珀猴子脚本，它为基于浏览器的游戏添加了一些信息。我使用一段简单的代码，根据玩家的语言环境将一千个分隔符添加到数字中： 此函数在许多代码中使用，例如： 这已经完美工作了很长时间，但是由于某种原因，在游戏运行的一个特定平台上，脚本现在拒绝加载，并给出以下错误信息： 无法读取未定义的属性“ToLocalString” 我已经回顾了几十个版本，以确保它不是我最近添加或更改的东西，老实说，我甚至不
-
我有一个简单的html页面，在body标记中没有代码。我想通过JavaScript在body标记中插入html。 我的javascript文件如下所示。 现在我想要这个很长的html代码在页面加载时自动插入到body标记中。但它给了我我在标题中提到的错误。为什么？ 而且这也是创建基于ajax的网站的正确方法吗（不重新加载页面），这意味着如果我调用服务器端脚本来更新这个很长的html代码并将其附加到
-
我知道有类似的线程讨论范围问题。 使用以下组件 当您单击时，您会得到的属性'setState' 我知道你可以像这样做，但所有这些看起来都很奇怪，只是为了让它工作。 什么被认为是最优雅的方式来做到这一点？当然，人们必须有一个首选的方式，除了眼睛疼痛之外，还有其他好处？