天道酬勤,学无止境

OffsetWidth null or undefined (Can't find solution) [closed]

*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'));

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Bootstrap Carousel:未捕获的类型错误:无法读取未定义的属性“offsetWidth”(Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined)
    问题 我似乎有一个 Bootstrap Carousel 问题,这是发布的其他问题/修复所独有的。 这个很奇怪。 控制台错误: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined at c.slide (https://www.somewebsite.com/js/bootstrap.min.js:6:6890) at c.next (https://www.somewebsite.com/js/bootstrap.min.js:6:6128) at e (https://www.nastassiafreeman.com/js/jquery.js:2:3957) 三、错误是如何触发的: 单击图像后,会弹出一个允许导航的模式/轮播。 单击箭头时,会触发错误,您无法继续查看下一张图像。 奇怪的事实: 当您刷新页面并重试时,它起作用了。 我的 html 设置为只有 1 个空轮播和许多图像,注意轮播是空的: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox">
  • jQuery事件监听位置改变(jquery event listen on position changed)
    问题 我需要听听元素的相对位置。 这对于动态布局问题特别有用。 没有选择来监听偶数position()或offset()属性的CSS样式。 原因:如果同级在对话框或表单(重新布局)中更改其尺寸,则相对位置可以更改。 因此,对于交互式表单,这可以帮助使用,即父级的最大可用高度或宽度或类似值。 回答1 这个自定义的jquery扩展通过计时器轮询侦听对象的位置。 恕我直言,没有计时器就无法解决这个问题,因为位置可能会在没有调用jquery的情况下发生改变(即重新布局同级元素)。 此解决方案监视元素.position()和.offset()的值。 可以轻松地改进它以查看.css()样式或jQuery事件未涵盖的其他内容。 jQuery扩展: jQuery.fn.onPositionChanged = function (trigger, millis) { if (millis == null) millis = 100; var o = $(this[0]); // our jquery object if (o.length < 1) return o; var lastPos = null; var lastOff = null; setInterval(function () { if (o == null || o.length < 1) return o; // abort
  • 如何获得反应元件的宽度(How to get the width of a react element)
    问题 我正在尝试创建一个范围输入,该范围输入在滑块的正上方显示一个工具提示。 我在网上浏览了一些普通的JS示例,看来我需要具有元素的宽度才能完成这一工作。 所以我只是想知道如何获得元素的宽度? 几乎等效于JQuery方法$(element).width() 回答1 class MyComponent extends Component { constructor(props){ super(props) this.myInput = React.createRef() } componentDidMount () { console.log(this.myInput.current.offsetWidth) } render () { return ( // new way - as of React@16.3 <div ref={this.myInput}>some elem</div> // legacy way // <div ref={(ref) => this.myInput = ref}>some elem</div> ) } } 回答2 带挂钩: const MyComponent = () => { const ref = useRef(null); useEffect(() => { console.log('width', ref.current ? ref
  • 使用引导轮播脚本无法获取未定义的属性“ offsetWidth”(Getting Cannot read property 'offsetWidth' of undefined with bootstrap carousel script)
    问题 我使用Bootstrap 3.3创建了一个carousel ,它可以在我的本地计算机上使用,但是当我将整个内容上传到正在将bootstrap js文件与其他文件一起编译到单个文件中的服务器上时,出现此错误: Cannot read property 'offsetWidth' of undefined -是否有人面对过此问题,并且对此问题有任何已知的解决方案吗? 回答1 对我来说,这是因为我没有在任何幻灯片上设置active课程。 回答2 对我来说,我将class='carousel-item'更改为class='item'如下所示 <div class="item"> <img class="img-responsive" src="..." alt="..."> </div> 回答3 删除页面加载中的``Carousal slide''类,并在使用jquery加载图像时动态添加它。 回答4 我有同样的错误。 因为我使用的是v4 alpha类名称(例如carousel-control-next当我使用v3进行更改时,问题得以解决。 回答5 “更改为if(typeof $ next =='object'&& $ next.length)$ next [0] .offsetWidth”-没有帮助。 如果将Bootstrap 3转换为php(用于WordPress主题)
  • Getting Cannot read property 'offsetWidth' of undefined with bootstrap carousel script
    I created a carousel with Bootstrap 3.3 and it works on my local machine, but when I upload the whole thing on server where the bootstrap js file is being compiled together with other files in a single file, I get this error: Cannot read property 'offsetWidth' of undefined - has anybody faced this and are there any known solutions to this issue?
  • 如何检测DIV的尺寸变化?(How to detect DIV's dimension changed?)
    问题 我有以下示例html,有一个DIV,其宽度为100%。 它包含一些元素。 在执行窗口调整大小时,内部元素可能会重新放置,并且div的尺寸可能会更改。 我问是否有可能挂钩div的尺寸更改事件? 以及如何做到这一点? 我目前将回调函数绑定到目标DIV上的jQuery resize事件,但是,没有控制台日志输出,请参见以下内容: <html> <head> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" language="javascript"> $('#test_div').bind('resize', function(){ console.log('resized'); }); </script> </head> <body> <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;"> <input type="button" value="button 1" /> <input type="button" value="button
  • Transitionend事件触发两次(transitionend event fires twice)
    问题 我有以下代码,但我的问题是transitionend事件被触发了两次。 我不知道是什么原因造成的。 我怀疑是由供应商前缀引起的,但并非如此。 即使我只离开transitionend并transition它仍然会触发两次。 的CSS transition: 1s ease-out; JS document.addEventListener('click', function (e) { var submarine = document.querySelector('.submarine'); var submarineX = e.clientX - submarine.offsetWidth / 2; var submarineY = e.clientY - submarine.offsetHeight / 2; submarine.style.left = submarineX + "px"; submarine.style.top = submarineY + "px"; }); document.addEventListener('transitionend', function (event) { console.log(event.type + " " + new Date().getTime()); }); 小提琴 document.addEventListener
  • Angular 2/Typescript 函数在运行时出现“未定义不是函数”错误('undefined is not a function' error at runtime with Angular 2/Typescript function)
    问题 我正在构建一个 angular(angular2/angular4 不是 angularJS)组件,它创建一个 D3.js 导航栏。 我对其他 D3 图表没有任何问题,它最初呈现得很好,但是在执行“画笔”时尝试访问类变量之一时出现运行时错误。 (旁注:有关通用 Javascript D3 画笔实现的示例,请参见此处:https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172) 该错误似乎与 Angular/Typescript 而不是 D3 相关:当尝试访问下面代码(靠近底部)的“brushed()”函数中的“this.x”时,“undefined is not a function”。 谁能解释我需要做什么才能在“刷过()”函数中访问“this.x”和“this.x.invert” import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core'; import * as d3 from 'd3'; import {StockData} from "../../dataServices/stockData"; @Component({ selector:
  • 水平数据更新不适用于滚动(Horizontal data update is not working on scroll)
    问题 我有一个大数组,我需要将它渲染到一个表中。 我没有渲染所有项目,而是仅在水平和垂直方向上渲染少数项目。 然后基于鼠标滚动滚动是否发生垂直/水平更新表值。 但是我在这方面有两个问题 这是我的代码的问题 水平滚动时不更新数据。 水平滚动也会使屏幕闪烁。 水平元素未正确对齐。 这是 jsbin 链接 http://jsbin.com/oSOsIQe/2/edit 这是JS代码,我知道代码不干净,但我稍后会清理它。 var $matrix = (function () { function $matrix(data, holder, hidescrollbar, config) { var header_h = config.header || "150px"; var data_h = config.header || "90px"; !data && (function () { // Fake Data, will be removed later data = new Array(50000); for (var i = 0, l = data.length; i < l; i++) { var dummy = Math.random().toString(36).substring(5); var dum = []; for (var j = 0; j < 26; j++)
  • 如何获得浏览器的滚动条大小?(How can I get the browser's scrollbar sizes?)
    问题 如何在JavaScript中确定水平滚动条的高度或垂直滚动​​条的宽度? 回答1 从Alexandre Gomes博客开始,我还没有尝试过。 请让我知道这对你有没有用。 function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'
  • 'undefined is not a function' error at runtime with Angular 2/Typescript function
    I am building an angular (angular2/angular4 not angularJS) component which creates a D3.js Navigation bar. I have not had any issues with other D3 charts, and it renders just fine initially, but I get a runtime error when trying to access one of the class variables when a "brush" is executed. (side note: see this for an example of general Javascript D3 brush implementation: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 ) The error appears to be related to Angular/Typescript and not D3 though: 'undefined is not a function' when trying to access "this.x" in the "brushed()"
  • 字体大小自动调整以适合(Font size auto adjust to fit)
    问题 我正在努力按照标题所说的去做。 我已经看到font-size可以是一个百分比。 所以我的猜测是font-size: 100%; 会这样做,但不会。 这是一个例子:http://jsfiddle.net/xVB3t/ 我可以得到一些帮助吗? (如果需要用 js 以编程方式进行,则没有问题) 回答1 这个问题可能会帮助你,但我警告你,虽然这可以通过 jQuery 解决它: 自动调整动态文本大小以填充固定大小的容器 祝你好运。 该问题的 OP 制作了一个插件,这是它的链接(和下载) 顺便说一句,我建议使用 jQuery,因为正如 Gaby 指出的,这不能仅通过 CSS 来完成,并且您说您愿意使用 js ... 回答2 不能用 CSS 来完成。 100% 与父元素的计算font-size有关。 参考:http://www.w3.org/TR/CSS2/fonts.html#font-size-props 对于 jQuery 解决方案,请查看 Auto-size dynamic text to fill fixed size container 回答3 我正在研究这个工作,我喜欢 tnt-rox 的回答,但我不禁注意到它有一些额外的开销可以削减。 document.body.setScaledFont = function(){ this.style.fontSize = (this
  • JavaScript runtime error: Unable to get property 'msie' of undefined or null reference
    I just tried changing my jquery ui references to the master page . I get the error above only on Internet explorer. I dont get the error on Firefox and Chrome . This is the jquery code where the error is thrown : return a.browser.msie?(b=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth),c=Math.max(document.documentElement.offsetWidth,document.body.offsetWidth),b<c?a(window).width()+"px":b+"px"):a(document).width()+"px"},resize:function(){var b=a([]);a.each(a.ui.dialog.overlay.instances,function() I have the master page below : <head id="Head1" runat="server"> <link rel=
  • vue-pdf查看pdf文件及打印乱码问题处理
    目录 前言vue-pdf 使用安装引入自定义封装pdf预览组件使用预览效果点击下载打印预览 pdf打印乱码解决办法解决办法乱码解决,打印预览正常修改后pdfjsWrapper.js源码 前言 vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题 vue-pdf 使用 安装 npm install --save vue-pdf 引入 import pdf from "vue-pdf 自定义封装pdf预览组件 <template> <el-dialog :visible.sync="pdfDialog" :close-on-click-modal="false" :show-close="false" width="900px" top="52px" > <div class="pdf" v-show="fileType == 'pdf'"> <p class="arrow"> <!-- 上一页 --> <span @click="changePdfPage(0)" class="currentPage" :class="{ grey: currentPage == 1 }" >上一页  </span > <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span> <!-- 下一页 --
  • Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    I seem to be having a Bootstrap Carousel issue unique to the other issues/fixes posted. This one is strange. The console error: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined at c.slide (https://www.somewebsite.com/js/bootstrap.min.js:6:6890) at c.next (https://www.somewebsite.com/js/bootstrap.min.js:6:6128) at e (https://www.nastassiafreeman.com/js/jquery.js:2:3957) Third, how the error is triggered: Upon clicking an image, a modal/carousel pops up that allows for navigation. When clicking the arrow, the error is triggered and you cannot continue to the next image
  • JavaScript 运行时错误:无法获取未定义或空引用的属性“msie”(JavaScript runtime error: Unable to get property 'msie' of undefined or null reference)
    问题 我只是尝试将我的 jquery ui 引用更改为母版页。 我只在 Internet Explorer 上收到上述错误。 我在 Firefox 和 Chrome 上没有收到错误消息。 这是引发错误的 jquery 代码: return a.browser.msie?(b=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth),c=Math.max(document.documentElement.offsetWidth,document.body.offsetWidth),b<c?a(window).width()+"px":b+"px"):a(document).width()+"px"},resize:function(){var b=a([]);a.each(a.ui.dialog.overlay.instances,function() 我有下面的母版页: <head id="Head1" runat="server"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
  • 在Google Maps中创建自定义信息窗口(Creating custom info windows in Google Maps)
    问题 我需要为Google Maps信息窗口(直边框和透明度等)创建自定义外观。 我知道这只能通过外部插件来实现,但是我不确定要使用哪个插件。 我尝试使用extInfoWindow,但是在使其正常工作时遇到了问题。 我也看过了PD Marker窗口(http://www.pixeldevelopment.com/pdmarker.asp),但自更新以来似乎已经有一段时间了(2007) 还有其他具有类似功能的插件吗? 谢谢, 回答1 我自己有这个问题。 我一直在使用api v.3,并且那里没有非常好的自定义信息框,因此我自己做了一个(根据我发现的一些信息)。 希望对您有所帮助:-) 这是插件代码: function InfoBox(opt_opts) { opt_opts = opt_opts || {}; this.imgPath='img/infoBox/'; google.maps.OverlayView.apply(this, arguments); // Standard options (in common with google.maps.InfoWindow): this.content_ = opt_opts.content || ""; this.maxWidth_ = opt_opts.maxWidth || 0; this.pixelOffset_ = opt
  • window.innerHeight ie8 替代(window.innerHeight ie8 alternative)
    问题 我有一些依赖window.innerHeight计算。 但正如我发现这在 IE9 之前的任何 IE 中都不可用。 我看过的所有其他选项甚至都没有接近我使用window.innerHeight时得到的数字。 有人有解决办法吗? 回答1 您可能想尝试: document.documentElement.clientHeight; 或者可以使用 jQuery 的 .height() 方法: $(window).height(); 回答2 我为 IE8 和其他人做了一个简单的垫片: window.innerWidth window.innerHeight window.scrollX window.scrollY document.width document.height 559 字节 (function(d,b){var c=b.documentElement;var a=b.body;var e=function(g,h,f){if(typeof g[h]==="undefined"){Object.defineProperty(g,h,{get:f})}};e(d,"innerWidth",function(){return c.clientWidth});e(d,"innerHeight",function(){return c.clientHeight});e(d
  • vue项目基于vue-video-player实现rtmp直播流
    vue播放器插件 项目要求: 我们做的是一个监控项目,需要实时监控某机器,播放器在监控页面可拖动。 插件选择: 项目是vue框架,播放器选择了vue-video-player插件, vue-video-player,其实就是 video.js 集成到 vue 中 ,视频流选择rtmp格式,实时性高,稳定性也高,但是依赖flash插件。 使用步骤 安装 vue-video-player npm install vue-video-player -S 引用插件 import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; import { videoPlayer } from 'vue-video-player'; import 'videojs-flash'; 注意: 1、vue-video-player 其实就是 video.js 集成到 vue 中,所以千万不要再安装 video.js,可能会出错。 2、播放 HLS 流,需要 videojs-contrib-hls 插件,(!直接引用,因为在安装vue-video-player插件时,hls插件是一并下载下来的),如果需要 RTMP 流,需要 videojs-flash 插件,也是直接引用就可以了( flash 插件需要在
  • 检查HTML元素是否具有滚动条(Check whether HTML element has scrollbars)
    问题 检查元素是否具有滚动条的最快方法是什么? 当然,一件事是检查element是否大于其视口,这可以通过检查以下两个值来轻松完成: el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth 但这并不意味着它也具有滚动条(因此它实际上可以被人类滚动)。 问题 如何在1个跨浏览器和2个javascript中检查滚动条(如无jQuery )? 仅使用Javascript,因为我需要尽可能小的开销,因为我想编写一个非常快速的jQuery选择器过滤器 // check for specific scrollbars $(":scrollable(x/y/both)") // check for ANY scrollbar $(":scrollable") 我想我必须检查overflow样式设置,但是如何以跨浏览器的方式进行呢? 附加编辑 不仅overflow样式设置。 检查元素是否具有滚动条并不是看起来那么简单。 我上面写的第一个公式在元素没有边框的时候很好用,但是当元素没有边框时(特别是当边框具有相当大的宽度时), offset尺寸可以大于scroll尺寸,但是元素仍然可以滚动。 实际上,我们必须从offset尺寸中减去边框以获取元素的实际可滚动视口,并将其与scroll尺寸进行比较。 备查