麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

google map 错误Cannot read property 'offsetWidth' of null

还是说说在写google map中标注雅安地震位置(js)demo时候遇到的问题,在解决了google map无法显示 google is not defined问题之后又遇到了这个Uncaught TypeError: Cannot read property 'offsetWidth' of null的问题,很是百思不得其解!

于是静下心来看代码,我是这样写的:

<script type="text/javascript">
var myLatlng=new google.maps.LatLng(30.3, 103.00);
var mapOptions = {
  center: myLatlng,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
title:"雅安地震震源"
});

//将标记显示在地图中
marker.setMap(map);

</script>
<div id="map_canvas" style="width:500px; height:500px;"></div>

自习看看找到问题了,因为我js里面调用了map_canvas这个id,但是调用的时候map_canvas这个div还没有加载出来,所以出现了这么个纠结的问题。改正方法也也很简单,就是把map_canvas的那个div放到js的前面即可。

改正后的代码如下:

<div id="map_canvas" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var myLatlng=new google.maps.LatLng(30.3, 103.00);
var mapOptions = {
  center: myLatlng,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
title:"雅安地震震源"
});

//将标记显示在地图中
marker.setMap(map);

</script>

小编最近脑子抽风,所以有些错误很低级,轻喷。。。

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
B站关注
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
麻辣GIS小破B站
有趣的技术视频

留言板(小编看到第一时间回复)