javascript - OffsetWidth null 或 undefined(找不到解决方案)

标签 javascript google-maps google-maps-api-3

<分区>

*致版主,请不要删除此帖子,我知道这是重复的,所以以下是我的论点: 在过去的 3 小时里,我浏览了几个论坛(包括 stackoverflow 和 google 论坛等)并查看了许多类似问题的帖子,但仍然找不到任何解决方案。我是一名新程序员,还有很多东西要学。 当我打开 map 时,我的 google maps v3 设法加载并且标记也​​显示出来,但问题是本地图从服务器接收新位置以在 map 上显示为标记时,发生错误:

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

我按照谷歌官方文档中的步骤操作,但仍然遇到这个问题。下面是我的代码:

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

提前谢谢你。

最佳答案

这是 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'));

关于javascript - OffsetWidth null 或 undefined(找不到解决方案),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16894569/

相关文章:

javascript - Google map - 更改现有标记的样式属性并更新 map

Android,无法解析方法 getMap()

javascript - 获取 Google Maps API map 的宽度(以公里为单位)

javascript - 如何制作 Google Maps API v3 六边形平铺 map ,最好是基于坐标的 map ?

google-maps - 将可拖动的 map 标记放置在 map 窗口的左上角

javascript - 将数组从表行传递到 JavaScript

javascript - 不适用于成对的重复数字 (JS)

javascript - 如何将 javascript 函数的返回值传递给 android?

javascript - JSLint 100% 有效的 Google Universal Analytics 片段,修复 "Unexpected assignment expression"

android - MNC 使用 Google map 的权限问题