首页 文章

谷歌 Map 加载问题使用javascript createElement

提问于
浏览 次
2

我正在开发一个小部件来向我的网站显示一些数据给其他人 . 为此，我必须通过javascript createElement方法动态加载一些脚本文件 . 这是我的代码 .

<script language="javascript" type="text/javascript">
var script = document.createElement('script');
script.onload = function() {
//initMap();
};
script.src = "http://maps.google.com/maps/api/js?sensor=false";
document.getElementsByTagName('head')[0].appendChild(script);
function initMap()
{
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
 zoom: 12,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP

}; var map = new google.maps.Map（document.getElementById（“map_canvas”），mapOptions）;

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Hello World!"
});
}
$(document).ready(function(){
initMap();
});
</script>

此代码既不在script.onload函数中初始化映射，也不在document.ready上初始化映射 . 提前致谢 .

google-maps

1 回答

  • 1

    我不知道为什么，但似乎谷歌 Map api在动态加载时没有完全加载 . 相反，你可以使用谷歌Loader https://developers.google.com/loader/，这很好 .

    这是你修改过的 <script> ：

    var script = document.createElement('script');
script.src = "https://raw.github.com/getify/LABjs/master/LAB.min.js";
script.onload = function() {
    $LAB
        .script('http://code.jquery.com/jquery-1.8.0.min.js')
        // .script('...') // other scripts which DO NOT depend on maps API

        // if script X depends on jquery for example, it must be loaded like this:
        // .wait() // this makes sure scripts above (jquery) are loaded before continuing
        // .script('X')
        .script('https://www.google.com/jsapi')
        .wait(function() {
            // this is called after everything above is loaded
            google.load("maps", "3", 
                {
                    "callback" : onMapsLoad, // called when maps api loaded
                    "other_params": "sensor=false"
                });
        });
};
document.getElementsByTagName('head')[0].appendChild(script);

function onMapsLoad() {
    $LAB
        // add here scripts which DEPEND on Maps API
        .script('https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js')
        .wait(
            function() {
                // called when all above is loaded
                $(function() { // makes sure DOM is ready
                    initMap();
                });
            }
        );
}

function initMap()
{
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
 zoom: 12,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Hello World!"
});
}
    回复于

相关问题