谷歌地图未捕获的类型错误：无法读取 null 的属性“offsetWidth”
Posted
技术标签:
【中文标题】谷歌地图未捕获的类型错误：无法读取 null 的属性“offsetWidth”【英文标题】：google map Uncaught TypeError: Cannot read property 'offsetWidth' of null 【发布时间】：2013-05-26 05:50:03 【问题描述】：这是包含 googlemap api 的源。 我是网络编程的新手。 我几乎没有制作这个网页。但我面临上述错误。 我读了很多关于这个错误的问题。 但我无法修复这个错误。 请修复此错误。 谢谢。
<html>
<head>
<title>geocoder</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var kyun ="kyun";
var map;
var marker;
var formated_address2;
var temp_x;
var temp_y;
var value1;
$(document).ready(function()
var latlng = new google.maps.LatLng(37.5640, 126.9751);
var myOptions =
zoom : 12,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker(
position : latlng,
map : map
);
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function(event)
var location = event.latLng;
geocoder.geocode(
'latLng' : location
,
function(results, status)
if( status == google.maps.GeocoderStatus.OK )
$('#address').html(results[0].formatted_address);
$('#lat').html(results[0].geometry.location.lat());
$('#lng').html(results[0].geometry.location.lng());
value1 = results[0].geometry.location.lat() +',' + results[0].geometry.location.lng();
else
alert("Geocoder failed due to: " + status);
);
if( !marker )
marker = new google.maps.Marker(
position : location,
map : map
);
else
marker.setMap(null);
marker = new google.maps.Marker(
position : location,
map : map
);
map.setCenter(location);
);
);
GoogleMap =
/* 초기화. */
initialize : function()
this.input = document.getElementById("GoogleMap_input");
this.address = document.getElementById("GoogleMap_addr");
this.geocoder = new google.maps.Geocoder();
this.infowindow = new google.maps.InfoWindow();
//지도 생성.(기본 위치 서울.)
var latlng = new google.maps.LatLng(37.56641923090,126.9778741551);
var myOptions =
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
this.map = new google.maps.Map(
document.getElementById("GoogleMap_map"),myOptions);
//마커 생성.
this.marker = new google.maps.Marker(
map : this.map,
animation: google.maps.Animation.DROP
);
,
/* 주소 검색.(지오코딩) */
codeAddress : function()
var address = this.input.value;
//콜백 함수 호출.
this.geocoder.geocode( 'address': address,
function(results, status)
if (status == google.maps.GeocoderStatus.OK)
//검색 된 주소 목록.
GoogleMap.address.innerHTML = "";
var ul = document.createElement('ul');
for(var i=0; i<results.length; i++)
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#" + results[i].geometry.location;
var str_pos = results[i].geometry.location.toString().split(',');
var x = str_pos[0]
x = x.substring(1,x.length).split('.');
x = x[0] + '.' + x[1].substring(0,6);
temp_x = x;
var y = str_pos[1]
y = y.substring(1,y.length).split('.');
y = y[0] + '.' + y[1].substring(0,6);
temp_y = y;
value = x+","+y;
a.innerHTML = results[i].formatted_address;
formated_address2 = results[i].formatted_address;
GoogleMap.clickAddress(a, results[i].geometry.location,
results[i].formatted_address);
li.appendChild(a);
ul.appendChild(li);
GoogleMap.address.appendChild(ul);
);
,
//주소 클릭 이벤트.
clickAddress : function(a, addr,content)
a.onmousedown = function()
//지도와 마커이동.
/*
GoogleMap.map.setCenter(addr);
GoogleMap.marker.setPosition(addr);
GoogleMap.marker.setAnimation(google.maps.Animation.DROP);
GoogleMap.infowindow.setContent(content);
GoogleMap.infowindow.open(GoogleMap.map,GoogleMap.marker);
*/
kyun = addr;
clss.a();
window.onload = function()
GoogleMap.initialize();
function insertText()
var tempName = window.top.dialogArguments;
tempName.userName = value1;
tempName.changeText();
function modalCancel()
var tempName = window.dialogArguments;
tempName.changeText();
function parentClose()
window.top.close();
function newWin()
window.open("test.html","","");
function modalclose()
self.close();
clss =
a: function ()
map.setCenter(kyun);
marker.setPosition(kyun);
marker.setAnimation(google.maps.Animation.DROP);
$('#address').html(formated_address2);
$('#lat').html(temp_x);
$('#lng').html(temp_y);
value1 = temp_x+','+temp_y;
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="2"><div id="map_canvas" style="width: 460px; height: 380px;"></div></td>
</tr>
<tr>
<th >위도</th>
<td id="lat"></td>
</tr>
<tr>
<th>경도</th>
<td id="lng"></td>
</tr>
<tr>
<th>주소</th>
<td id="address"></td>
</tr>
<tr>
<td colspan = "2">
<div>
<input id="GoogleMap_input" type="textbox" value="" onkeydown="javascript:if(event.keyCode == 13) GoogleMap.codeAddress();" style='width:365px;'>
<input type="button" value="주소검색" onclick="javascript:GoogleMap.codeAddress();">
</div>
<div id="GoogleMap_addr"></div>
</td>
</tr>
<tr>
<td style='width:450px;' colspan ="2" align = "center">
<TABLE border = "0">
<div>
<tr>
<td style='width:225px;' align = "center">
<INPUT VALUE="취소" TYPE=button onclick="window.close();" style='width:200px;'><BR>
</td>
<td style='width:225px;' align = "center">
<INPUT VALUE="확인" TYPE=button onclick="insertText();window.close();" style='width:200px;'>
</td>
</tr>
</div>
</TABLE>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
您是否尝试过通过 JSLint 之类的验证器运行您的代码？它发现了几个错误 Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null 的可能副本。您没有 id="GoogleMap_map" 的 div。 【参考方案1】：尝试在 HTML 元素之后调用 JavaScript 函数，因为大多数情况下会出现此问题，因为调用脚本函数时元素尚未完全呈现。
【讨论】：
@user2437128：如果我的回复是帮助您解决问题的正确答案，请勾选已接受的答案，谢谢！以上是关于谷歌地图未捕获的类型错误：无法读取 null 的属性“offsetWidth”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 null 的属性“长度”（maps.js 第 85 和 541 行）
未捕获的类型错误无法读取 null 的属性（读取“查询选择器”）
未捕获的类型错误：无法读取 null 的属性（读取“添加”）