Google Maps JS Api：无法读取 null 的属性“offsetwidth”[重复]
Posted
技术标签:
【中文标题】Google Maps JS Api：无法读取 null 的属性“offsetwidth”[重复]【英文标题】：Google Maps JS Api: Cannot read property 'offsetwidth' of null [duplicate] 【发布时间】：2016-11-12 12:07:56 【问题描述】：我正在使用 Google Maps JS Api 在网站上显示地图。该网站向我展示了一张空卡片，在检查元素时，我发现了错误：无法读取 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;
<!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);
【问题讨论】：
【参考方案1】：我认为问题在于您试图在页面完成加载之前（在创建 card-map 元素之前）初始化地图。
试试这个：
删除这一行
google.maps.event.addDomListener(window, "load", initialize);
来自initialize 函数
并将这个添加到该函数之外（在全局上下文中）。
window.addEventListener("load",initialize, false);
另外，删除对initialize 函数的所有其他调用。
【讨论】：
我仍然遇到同样的错误。我已经按照你提到的那样编辑了代码。 @user1911256 您能否编辑您的问题以反映您所做的更改？ 是的，我已经编辑了问题，您应该可以看到更改。 @user1911256window.addEventListener("load",initMap, false); 调用应该在initMap 函数之外，并确保您没有从代码中的其他任何地方调用initMap。
感谢您的帮助！【参考方案2】：
我发现了问题：我使用的是类而不是 id。在 css 和 html 中将 class 更改为 id 确实可以解决问题。
【讨论】：
以上是关于Google Maps JS Api：无法读取 null 的属性“offsetwidth”[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API JS - 从另一个JS文件访问标记位置
从 google maps 地方 api 读取 json 文件（使用 javascript 或 php）