$getScript 加载谷歌地图 api 的方法 ->空白页?

发布于 2024-11-05 13:50:21 字数 1854 浏览 2 评论 0原文

我的页面上有一个小按钮,应该加载谷歌地图。因为我希望我的页面加载速度非常快,而且这个功能实际上并不是必需的,所以我不想在页面加载时嵌入 google 地图 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);

    });

});

页面加载时页面不会变为空白,但是一旦我单击地图按钮,页面就会变白。

更新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);

}

I have a little button on my page that should load a google map. Since I want my page to load really fast and this feature is not actually necessary I don't want to embed the google maps API script on page-load. I just want to load it when the button is actually clicked.

I tried using the jquery $.getScript() method, however if I'm using the code above I'm getting a blank page. The page starts loading and as soon as my javascript file gets executed the page is blank (white).

$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    $('#googleMap').live('click', function(e) {

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });
});

What am I doing wrong here?

edit/update:

Doesn't seem to make a difference if I do this:

$('#googleMap').live('click', function(e) {

    $.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });

});

The page doesn't get blank on page-load however as soon as I click on the maps-button the page gets whitened.

update 2:

the loadMap function:

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

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

流殇 2024-11-12 13:50:21

这里的问题是您正在加载的谷歌地图 api js 链接使用 document.write 向页面添加额外的脚本标签。这使得您尝试做的事情变得不可能,因为它将覆盖页面内容。

The problem here is the google map api js link you are loading uses document.write to add additional script tags to the page. That makes what you trying to do impossible since it will override the page content.

时光病人 2024-11-12 13:50:21

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

The js script is loaded successfully:

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

However, it seems that google.maps doesn't have some property you're calling in loadMap, for example google.maps.LatLng.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文