javascript - jQuery 与 Google map

Question

我想将 jQuery 与 Google map 结合使用。我正在尝试复制this example 。下面给出了我正在使用的代码。问题是 map 没有出现在我的网页上。只是一片空白。这是什么情况？

<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 来在 Google map 上叠加矢量蓝图，我可以告诉你，尽管输入可能会多一些，但使用 JavaScript 会更好。 不要使事情过于复杂，正如 M1ke 所说，在使用 JavaScript 时始终保持控制台打开。