首页 文章

$ getScript加载google maps api的方法 - >空白页？

提问于
浏览 次
3

我的页面上有一个小按钮，可以加载谷歌 Map . 由于我希望我的页面加载速度非常快，而且此功能实际上并不是必需的，因此我不想在页面加载时嵌入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);

}
javascript jquery google-maps-api-3 getscript

2 回答

  • 8

    js脚本已成功加载：

    alert(window.google);   // before load undefined
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    alert(window.google); // after load [object Object]
});

    但是，似乎 google.maps 不会在 loadMap 中调用，例如 google.maps.LatLng .

    回复于
  • 0

    这里的问题是您正在加载的google map api js链接使用document.write向页面添加其他脚本标记 . 这使你想要做的事情变得不可能，因为它会覆盖页面内容 .

    回复于

相关问题