Javascript jQuery与谷歌地图

我想将jQuery与谷歌地图结合使用。我正在尝试复制。下面是我正在使用的代码。问题是地图没有出现在我的网页上。只是一片空白。怎么回事

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.map.js"></script>

    <div id="fragment-4">
    <script>
    $(document).ready(function(){
        $('#map_canvas').gmap().bind('init', function(evt, map) {
            $('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
                var clone = $(item).clone().addClass('ui-dialog-vevent');
                clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
                var lat = result.location[0].geo[0].latitude['value-title']; 
                var lng = result.location[0].geo[0].longitude['value-title'];
                $('#map_canvas').gmap('addMarker', { 
                        'bounds':true, 
                        'position': new google.maps.LatLng(lat, lng), 
                        'title': result.summary,  
                    }, 
                function(map, marker) {
                    $(item).find('.summary').click( function() {
                        $(marker).triggerEvent('click');
                        return false;
                    }); 
                }).click(function() {
                    map.panTo( $(this).get(0).getPosition());
                    $(clone).dialog({ 
                        'modal': true, 
                        'width': 530, 
                        'title': result.summary, 
                        'resizable': false, 
                        'draggable': false 
                    });
                    $('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 
                        'position': $(this).get(0).getPosition() 
                    });
                });
            });
        });
    });
        </script>
                <div id="map_canvas">

    </div>
    </div>

$（文档）.ready（函数（）{
$（'#map_canvas'）.gmap（）.bind（'init'，函数（evt，map）{
$（'map_canvas'）.gmap（'microformat'，'.vevent'，函数（结果、项、索引）{
var clone=$（item.clone（）.addClass（'ui-dialog-vevent'）；
clone.append（''.replace（'{0}'，index））；
var lat=result.location[0]。地理[0]。纬度['value-title']；
var lng=result.location[0]。地理[0]。经度['value-title']；
$（'map_canvas'）.gmap（'addMarker'，{
“界限”：对，
“位置”：新的google.maps.LatLng（lat，lng），
“title”：result.summary，
}, 
功能（地图、标记）{
$（项）。查找（'.summary'）。单击（函数（）{
$（标记）.triggerEvent（'click'）；
返回false；
}); 
})。单击（函数（）{
panTo（$（this.get（0.getPosition（））；
$（克隆）.dialog（{
“模态”：正确，
“宽度”：530，
“title”：result.summary，
“可调整大小”：false，
“可拖动”：false
});
$（'map#u canvas'）.gmap（'displayStreetView'，'streetview{0}'。替换（'0}'，索引），{
'position'：$（this.get（0.getPosition（））
});
});
});
});
});

假设这是你的全部代码，那么可能有很多东西：

• 第3行的脚本文件是否在正确的文件夹中（检查控制台）
• 您的目标是“地图”画布，但该元素不存在
• 复制脚本后，需要将选项传递给gmap（）方法，否则它会抛出错误

最好的办法是检查您的JavaScript控制台（Chrome中的Ctrl+Shift+J，如果您使用的是Firefox，请下载Firebug），查看错误跟踪并从中修复

---

另外，在div中包含脚本也是不必要的——如果您使用document write，那么提供调用元素的脚本感知的唯一用途就是，当您使用jQuery时，我怀疑这种情况是否会发生。

为此使用纯JavaScript。 在这种情况下，JQUERY不是最佳选择。 我已经开发了一个巨大的API，可以将矢量蓝图覆盖在Google地图上，我可以告诉你们，尽管输入可能会稍微多一些，但只使用JavaScript要好得多。

---

不要使事情过于复杂，正如M1ke所说，在使用JavaScript时，始终保持控制台打开。

是否有id为“map_canvas”的实际div，用于绘制地图？尝试在

ready

callback->

$（document）.ready（function（）{/*Script here*/}）中添加JavaScript请查看更新的代码。我包括了你的建议，但仍然不起作用。