Question

我如何做到这一点？每次我尝试从谷歌地图加载外部javascript文件时，它都会崩溃网页并变为空白。

我使用了$ JQuery.get（）;功能

我正在使用JQuery将文件加载到头部。

Answer 1

Google地图可能会使用document.write。这解释了空白页面。这就是为什么document.write是邪恶的。

尝试将google js文件下载到磁盘并搜索document.write。如果它在那里，那么您唯一的选择是使用<script>标记正常包含它。

Answer 2

jQuery没有（正确地）没有回调的跨域ajax请求。请参阅docs底部的注释。

Answer 3

我认为Google Maps API在使用方面有一些限制，您需要在加载页面时链接到它，即使您没有立即使用它。您还需要最初在页面上设置目标div（并且在其正确的位置），即使它在加载时隐藏。

Answer 4

这是我在我们的应用中使用的代码：

<html>
<head>
    <title>geocoder test</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        function jsonp(src){
            var s = document.createElement("script");
            s.charset = "UTF-8";
            s.src = encodeURI(src);
            s.id = 'jsonp';
            document.body.appendChild(s);
            return s;
        };

        function showMap(json){
            var mapCanvas = document.getElementById('map_canvas'), 
                jsonp = document.getElementById('jsonp');
            if(json.Status.code !== 200){
                mapCanvas.innerHTML = 'Address not found';
                return false;
            }
            var ll = json.Placemark[0].Point.coordinates,
                latlng = new google.maps.LatLng(ll[1], ll[0]),
            myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            map = new google.maps.Map(mapCanvas, myOptions),
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            jsonp.parentNode.removeChild(jsonp);
        }

        function getMap(address){
            jsonp([
                'http://maps.google.com/maps/geo?',
                'q=' + address,
                '&output=json',
                '&sensor=false',
                //'&key= ... place here your key if not on localhost ...',
                '&callback=showMap'
            ].join(''));
        }
    </script>
</head>
<body>
    <input type="text" value="gran place, brussels"/><input type="button" onclick="getMap(this.previousSibling.value)" value="Get Map"/>
    <div id="map_canvas" style="width:100%; height:450px"></div>
</body>
</html>

Answer 5

jQuery有一个功能就是这样：$.getScript。例如：

$.getScript('/script.js', function()
{
    alert('Script loaded!');
});

动态加载外部javascript文件

5 个答案: