OffsetWidth null或undefined（找不到解决方案） [英] OffsetWidth null or undefined (Can't find solution)
本文介绍了OffsetWidth null或undefined（找不到解决方案）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我打开地图并显示标记时，我的谷歌地图v3设法加载，但问题是当地图从服务器接收到新位置以显示为地图上的标记时，会发生错误： p>
第29行，
无法获取属性'offsetWidth'的值：object为null或undefined
url ：http://maps.gstatic.com/intl/fr_fr/mapfiles/api-3/13/2/main.js
我遵循谷歌官方文档的步骤，但仍然有这个问题。以下是我的代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =UTF-8/>
< title> Ma Google地图< / title>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：3; padding：3}
#map_canvas {height：100％}
< / style>
< style type =text / css>
.tooltip {
background-color：#ffffff;
font-weight：bold;
border：2px＃006699 solid; }
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script type =text / javascript>
//创建地图
//变量globales
// ------------------
//启用视觉刷新
google.maps.visualRefresh = true;
var map = null;
var Table_Pins = {}; // Liste des Pinsaffichées
var Pos_Info = null; // Dit sur quel marker se situe l'infobulle
var Liste_Points = []; //注入美食
var route = null;
var markers = [];
var _this = this;
// -------------------------------------------- ---------------------
函数初始化（）
{
var mapOptions = {
zoom：12，
center：new google.maps.LatLng（43.665，7.052），
mapTypeId：google.maps.MapTypeId.ROADMAP，//输入de carte
mapTypeControl：true，
panControl ：true，
zoomControl：true，//放大
scaleControl：true，// Echelle
scaleControlOptions：{
position：google.maps.ControlPosition.LEFT_BOTTOM}，
streetViewControl：true
};
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
}
// ------------------------
// Ouverture du WebBrowser
// -----------------------
try {google.maps.event.addDomListener（window，'load'，initialize）;}
catch（ex）{alert（vous devez etre connecte a l'internet ...）;}
// -------------------- -------------------------------------------------- --------------
// Affichage desvéhicules
// --------------------- -------------------------------------------------- -------------
var myPin = [];
var infowindow;
函数Affiche_Pin（Lat，Long，immat，type，site，vitesse，date）
{myPin = Table_Pins [immat];
var myPinhtml ='< b style =color：green>Véhicule：'+ immat +''+'< / b>< br>'+
'网站：'+ site +'< br>'+
'类型：'+ type +'< br>'+
'Vitesse：'+ vitesse +'km / h'+'< br>' +
'日期：'+ date +'< br>';
if（typeof myPin！=undefined）
{
// La Pin estdéjaplacée，on ladéplace
// ------ -------------------------------
myPin.setPosition（new google.maps.LatLng（Lat，Long） ）
map = new google.maps.Map（document.getElementById（'map'））;
map.setCenter（new google.maps.LatLng（Lat，Long））;
map.setZoom（12）;
if（Pos_Info == myPin）
{
infowindow = new google.maps.InfoWindow（{
content：myPinhtml，
position：new google .maps.LatLng（Lat，Long）}）;
infowindow.open（map，myPin）;
} // end if（pos_info）
} // end if（mypin）
else {
// ------ -------------------------
//Créationde la Pin et placement
// ------- ------------------------
var imageMarqueur = new google.maps.MarkerImage（'http://maps.google .com / mapfiles / kml / pal4 / icon15.png'，
新google.maps.Size（32，32），
新google.maps.Point（0,0），
新的google.maps.Point（16，32））;
var ombreMarqueur = new google.maps.MarkerImage（'http://maps.google.com/mapfiles/kml/pal4/icon15s.png'，
google.maps.Size（56,32 ），
new google.maps.Point（0,0），
new google.maps.Point（16，32））;
var vehlatlng = new google.maps.LatLng（Lat，Long）;
var marker = new google.maps.Marker（{
map：map，
position：vehlatlng，
icon：imageMarqueur，
shadow：ombreMarqueur}）;
infowindow = new google.maps.InfoWindow（{
content：myPinhtml，
position：vehlatlng}）;
markers.push（marker）;
marker.setMap（map）;
// EvenementClicketinfowindowopendu marker
// ------------------------ ---
google.maps.event.addListener（marker，'click'，function（）{
if（lastOpenInfoWin）lastOpenInfoWin.close（）;
lastOpenInfoWin = infowindow;
infowindow.open（marker.get（'map'），marker）;
Pos_Info = marker;}）;
Table_Pins [immat] = marker;
} // end else
} //结束函数affiche_pin
// ----------------- -------------------------------------------------- -----------------
//在中心levéhicule
// ----------------- -------------------------------------------------- -----------------
函数Centrer_Pin（immat）{
var myPin = Table_Pins [immat];
if（typeof myPin！=undefined）
{infowindow.close（）;
map.setZoom（14）;
map.setCenter（myPin.getPosition（））;
infowindow.open（map，myPin）;
google.maps.event.addListener（myPin，'position_changed'，function（）{
map.panTo（myPin.getPosition（））;
}）;
google.maps.event.addListener（map，'zoom_changed'，function（）{
infowindow.close（）;}）;
}
}
< / script>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
预先感谢您。
解决方案
这是 Google MAP API Uncaught TypeError：无法读取属性'offsetWidth'为空
$
$ b
map = new google.maps.Map（的document.getElementById（ '映射'））;
页面上没有id =map的元素。应该是：
map = new google.maps.Map（document.getElementById（'map_canvas'））;
*To Moderator, please do not remove this post, I know this is a duplicate so the following is my argument : I have been going through few forums(include stackoverflow and google forum etc) and view many post of similar problem for the past 3 hours but still can't find any solution. I'm a new programmer and lots more to learn. My google maps v3 manage to load when I open the map and the markers were display as well, but the problem is when the map receive new position from server to display as marker on the map, an error occur:
Line 29,
Unable to get value of the property 'offsetWidth': object is null or undefined
url: http://maps.gstatic.com/intl/fr_fr/mapfiles/api-3/13/2/main.js
I follow the steps from google officiel documentation but still got this problem. Below is my code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />
<title>Ma Page de Google Maps</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 3; padding: 3}
#map_canvas { height: 100%}
</style>
<style type="text/css">
.tooltip {
background-color:#ffffff;
font-weight:bold;
border:2px #006699 solid; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
//Creation de Map
// Variables globales
// ------------------
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = null;
var Table_Pins = {}; // Liste des Pins affichées
var Pos_Info = null; // Dit sur quel marker se situe l'infobulle
var Liste_Points = []; // Pour la mémorisation du tracé
var route = null;
var markers = [];
var _this = this;
//-----------------------------------------------------------------
function initialize()
{
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(43.665, 7.052),
mapTypeId: google.maps.MapTypeId.ROADMAP, //Type de carte
mapTypeControl: true,
panControl: true,
zoomControl: true, //Zoom
scaleControl: true, //Echelle
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM},
streetViewControl: true
} ;
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
//------------------------
// Ouverture du WebBrowser
// -----------------------
try { google.maps.event.addDomListener(window, 'load', initialize);}
catch (ex){ alert("vous devez etre connecte a l'internet...");}
// ------------------------------------------------------------------------------------
// Affichage des véhicules
// ------------------------------------------------------------------------------------
var myPin =[];
var infowindow;
function Affiche_Pin(Lat, Long, immat, type, site, vitesse, date)
{ myPin = Table_Pins[immat];
var myPinhtml = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b><br>' +
'Site : ' + site + '<br>' +
'Type : ' + type + '<br>' +
'Vitesse : ' + vitesse + ' km/h' + '<br>' +
'Date : ' + date + '<br>';
if (typeof myPin != "undefined")
{
// La Pin est déja placée, on la déplace
// -------------------------------------
myPin.setPosition(new google.maps.LatLng(Lat, Long))
map = new google.maps.Map(document.getElementById('map'));
map.setCenter(new google.maps.LatLng(Lat, Long));
map.setZoom(12);
if (Pos_Info == myPin)
{
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: new google.maps.LatLng(Lat, Long) });
infowindow.open(map, myPin);
} //end if (pos_info)
}//end if (mypin)
else{
// -------------------------------
// Création de la Pin et placement
// -------------------------------
var imageMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var ombreMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15s.png',
new google.maps.Size(56, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var vehlatlng = new google.maps.LatLng(Lat, Long) ;
var marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: imageMarqueur,
shadow: ombreMarqueur });
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: vehlatlng });
markers.push(marker);
marker.setMap(map);
// Evenement "Click" et "infowindowopen" du marker
// ---------------------------
google.maps.event.addListener(marker, 'click', function() {
if(lastOpenInfoWin) lastOpenInfoWin.close();
lastOpenInfoWin = infowindow;
infowindow.open(marker.get('map'), marker);
Pos_Info = marker;});
Table_Pins[immat] = marker;
}//end else
}//end function affiche_pin
// ------------------------------------------------------------------------------------
// On centre le véhicule
// ------------------------------------------------------------------------------------
function Centrer_Pin(immat) {
var myPin = Table_Pins[immat];
if (typeof myPin != "undefined")
{ infowindow.close();
map.setZoom(14);
map.setCenter(myPin.getPosition());
infowindow.open(map, myPin);
google.maps.event.addListener(myPin, 'position_changed', function() {
map.panTo(myPin.getPosition());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close();});
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
Thank you in advance.
解决方案
This is a duplicate of Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
The error is here (in the function Affiche_Pin):
map = new google.maps.Map(document.getElementById('map'));
There is no element with id="map" on your page. Should be:
map = new google.maps.Map(document.getElementById('map_canvas'));
这篇关于OffsetWidth null或undefined（找不到解决方案）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
