带谷歌地图的jQuery

Question

我想用谷歌地图使用jQuery。我试图复制this example。下面给出了我正在使用的代码。问题是地图没有出现在我的网页上。这只是空白。情况如何？

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

Answer 1

为此使用纯粹的JavaScript。 在这种情况下，JQUERY不是最好的选择。 我开发了一个巨大的API来覆盖谷歌地图上的矢量蓝图，我可以告诉你，即使它可能有点多键入，它只是使用JavaScript更好。 不要过于复杂的事情，因为M1ke表示在使用JavaScript时始终保持您的控制台处于打开状态。

Answer 2

假设这是你的整个代码也可能是一些事情：

• 你有3行脚本文件在正确的文件夹（请检查您的控制台）
• 你定位#map_canvas但该元素不存在。
• 复制脚本后，您需要将选项传递给gmap（）方法，否则会引发错误。

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

还包括你的脚本里面的div是没有必要的 - 唯一的用途是让脚本知道调用元素会是如果你使用的是文档编写，并且正如你使用jQuery我怀疑这将成为案件。