0

我想将 jQuery 与 Google 地图一起使用。我正在尝试复制此示例。下面给出了我正在使用的代码。问题是地图没有出现在我的网页上。它只是空白。这是什么情况？

<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>
4

2 回答 2

1

假设这是你的整个代码，它可能是很多事情：

  • 您是否在正确文件夹中的第 3 行获得了该脚本文件（检查您的控制台）
  • 您的目标是#map_canvas，但该元素不存在。
  • 复制脚本后，您需要将选项传递给 gmap() 方法，否则会引发错误。

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

也不需要将脚本包含在 div 中 - 让脚本了解调用元素的唯一用途是如果您使用的是文档写入，并且当您使用 jQuery 时，我怀疑这会成为这种情况。

于 2012-05-14T11:21:03.967 回答
1

为此使用纯 JavaScript。在这种情况下，JQUERY 不是最佳选择。我已经开发了一个巨大的 API 来在谷歌地图上覆盖矢量蓝图，我可以告诉你，即使打字可能会有点多，但使用 JavaScript 会更好。不要让事情过于复杂，正如 M1ke 所说，在使用 JavaScript 时始终保持控制台打开。

于 2012-05-14T11:25:21.183 回答