我的页面上有一个应该加载谷歌地图的小按钮。因为我希望我的页面加载得非常快,而且这个功能实际上并不是必需的,所以我不想在页面加载时嵌入 google maps API 脚本。我只想在实际单击按钮时加载它。
我尝试使用 jquery $.getScript() 方法,但是如果我使用上面的代码,我会得到一个空白页面。页面开始加载,一旦我的 javascript 文件被执行,页面就会变成空白(白色)。
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
$('#googleMap').live('click', function(e) {
e.preventDefault();
loadMap("mapBottomContainer", false);
});
});
我在这里做错了什么?
编辑/更新:
如果我这样做似乎没有什么不同:
$('#googleMap').live('click', function(e) {
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
e.preventDefault();
loadMap("mapBottomContainer", false);
});
});
页面在页面加载时不会变成空白,但是只要我点击 map 按钮,页面就会变白。
更新 2:
loadMap函数:
function loadMap(cont, scroll) {
var latlng = new google.maps.LatLng(47.244236,11.249194);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: scroll,
streetViewControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById(cont), options);
var mapdesc = '<div id="gmContent">'+
'<h3 id="gmTitle" class="widget-title">Something</h3>'+
'<div id="gmBody">'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: mapdesc
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'My Title'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
最佳答案
这里的问题是您正在加载的 google map api js 链接使用 document.write 向页面添加额外的脚本标签。这使得您尝试做的事情变得不可能,因为它会覆盖页面内容。
关于javascript - $getScript 加载 google maps api 的方法 -> 空白页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5908458/