Fatal编程技术网
  • javascript/
  • Javascript OffsetWidth null或未定义（无法找到解决方案）

Javascript OffsetWidth null或未定义（无法找到解决方案）

javascript google-maps google-maps-api-3

Javascript OffsetWidth null或未定义（无法找到解决方案）,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,*对于版主，请不要删除此帖子，我知道这是重复的，因此以下是我的论点： 在过去的3个小时里，我浏览了一些论坛（包括stackoverflow和google论坛等），看到了很多类似问题的帖子，但仍然找不到任何解决方案。我是一个新的程序员，还有很多东西需要学习。 当我打开地图并显示标记时，我的google maps v3会设法加载，但问题是当地图从服务器接收到新位置以显示为地图上的标记时，会发生错误： Line 29, Unable to get value of the property 'off

*对于版主，请不要删除此帖子，我知道这是重复的，因此以下是我的论点： 在过去的3个小时里，我浏览了一些论坛（包括stackoverflow和google论坛等），看到了很多类似问题的帖子，但仍然找不到任何解决方案。我是一个新的程序员，还有很多东西需要学习。 当我打开地图并显示标记时，我的google maps v3会设法加载，但问题是当地图从服务器接收到新位置以显示为地图上的标记时，会发生错误：

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
我遵循google Officel文档中的步骤，但仍然遇到了这个问题。下面是我的代码：

<!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>


谷歌地图
html{高度：100%}
正文{高度：100%；边距：3；填充：3}
#地图画布{高度：100%}
.工具提示{
背景色：#ffffff；
字体大小：粗体；
边框：2px#006699 solid；}
//创建地图
//球形变数
// ------------------
//启用可视刷新
google.maps.visualRefresh=true；
var-map=null；
变量表_Pins={}；//别针粘贴列表
var Pos_Info=null；//在信息布尔的东南部标记上
var Liste_Points=[]；//倒酒
var-route=null；
var标记=[]；
var_this=这个；
//-----------------------------------------------------------------
函数初始化（）
{
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（43.665,7.052），
mapTypeId:google.maps.mapTypeId.ROADMAP，//键入点菜
mapTypeControl:true，
泛控制：对，
zoomControl:true，//缩放
scaleControl:true，//Echelle
规模控制：{
位置：google.maps.ControlPosition.LEFT_BOTTOM}，
街景控制：正确
} ;
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
}
//------------------------
//韦伯酒店
// -----------------------
请尝试{google.maps.event.addDomListener（窗口'load'，initialize）；}
捕获（例如）{alert（“你要连接互联网…”）；}
// ------------------------------------------------------------------------------------
//véhicules附加条款
// ------------------------------------------------------------------------------------
var myPin=[]；
var信息窗口；
功能固定销（横向、纵向、纵向、横向、类型、位置、方向、日期）
{myPin=Table_Pins[immat]；
var myPinhtml='Véhicule:'+immat+'+'
'+
'站点：'+Site+'
'+
'类型：'+Type+'
'+
“Vitesse:'+Vitesse+'km/h'+'
'+
'日期：'+Date+'
'；
if（myPin的类型！=“未定义”）
{
//La Pin est déja placée，在La déplace
// -------------------------------------
myPin.setPosition（新的google.maps.LatLng（Lat，Long））
map=newgoogle.maps.map（document.getElementById（'map'）；
setCenter（新的google.maps.LatLng（Lat，Long））；
map.setZoom（12）；
如果（Pos_Info==myPin）
{
infowindow=新建google.maps.infowindow({
内容：myPinhtml，
位置：新google.maps.LatLng（Lat，Long）}；
打开（地图，myPin）；
}//如果结束（位置信息）
}//如果结束（mypin）
否则{
// -------------------------------
//针和针的位置
// -------------------------------
var imagemarkur=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 ombremarkur=new google.maps.MarkerImage（'http://maps.google.com/mapfiles/kml/pal4/icon15s.png',
新谷歌地图大小（56,32），
新google.maps.Point（0,0），
新的google.maps.Point（16,32））；
var vehlatlng=新的google.maps.LatLng（Lat，Long）；
var marker=new google.maps.marker({
地图：地图，
职位：Vehlatling，
图标：ImageMarquer，
阴影：OmbreMarquer}）；
infowindow=新建google.maps.infowindow({
内容：myPinhtml，
位置：Vehlatling}）；
标记器。推（标记器）；
marker.setMap（map）；
//晚上“点击”et“信息窗口打开”du标记
// ---------------------------
google.maps.event.addListener（标记'click'，函数（）{
if（lastOpenInfoWin）lastOpenInfoWin.close（）；
lastOpenInfoWin=infowindow；
打开（marker.get（'map'），marker）；
Pos_Info=marker；}）；
表_引脚[immat]=标记；
}//结束其他
}//端功能固定销
// ------------------------------------------------------------------------------------
//在中心的véhicule酒店
// ------------------------------------------------------------------------------------
功能中心针（immat）{
var myPin=表_Pins[immat]；
if（myPin的类型！=“未定义”）
{infowindow.close（）；
map.setZoom（14）；
map.setCenter（myPin.getPosition（））；
打开（地图，myPin）；
google.maps.event.addListener（myPin，'position_changed'，function（）{
panTo（myPin.getPosition（））；
});
google.maps.event.addListener（映射'zoom_changed'，函数（）{
infowindow.close（）；}）；
}
}

谢谢你的支持 
map = new google.maps.Map(document.getElementById('map'));

map = new google.maps.Map(document.getElementById('map_canvas'));