Question

*对主持人，请不要删除这篇文章，我知道这是重复的，所以以下是我的论点：我一直在经历几个论坛（包括stackoverflow和谷歌论坛等），并在过去的3个小时内查看了许多类似问题的帖子，但仍无法找到任何解决方案。我是一名新的程序员，还有很多需要学习的东西。当我打开地图并显示标记时，我的谷歌地图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 officiel文档中的步骤操作但仍然遇到此问题。以下是我的代码：

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

提前谢谢。

Answer 1

这是Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

的副本

错误在这里（在函数Affiche_Pin中）：

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

页面上没有id =“map”的元素。应该是：

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

OffsetWidth null或undefined（找不到解决方案）

1 个答案: