首先,为另一个这样的问题道歉,但我似乎无法找到现有问题与我之间的相似之处,所以我在这里
我的index.html如下:
<html><script id="employee-tpl" type="text/x-handlebars-template">
<div class='header'><a href='#' class="button header-button header-button-left">Back</a><h1>Map</h1></div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
</script></html>
所以这是div包含地图的index.html的一部分。所以下一节是上面的'编译和调用'
=============的 EDITED ==============
var EmployeeView = function(employee){
function initMap(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
};
this.render = function(){
this.el.html(EmployeeView.template(employee));
return this;
};
this.initialize = function(){
this.el=$('<div/>');
};
this.initialize();
google.maps.event.addDomListener(window, "load", initMap);
}
EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
所以用上面的逻辑,不知怎的,我仍然得到以下错误:(
Uncaught TypeError: Cannot read property 'offsetWidth' of null
有人可以启发我吗?
答案 0 :(得分:6)
您需要在窗口加载时添加一个侦听器,因为您似乎在呈现之前尝试访问该地图,并且您收到null
消息。
将初始化包装成函数并将其称为:
google.maps.event.addDomListener(window, 'load', initMap);
function initMap () {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}