帶谷歌地圖的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我懷疑這將成爲案件。