0

Google マップで jQuery を使用したいと考えています。この例を再現しようとしています。以下に、私が使用しているコードを示します。問題は、マップが私の Web ページに表示されないことです。それはちょうど空白です。ケースは何ですか？

<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

これには純粋な JavaScript を使用してください。この場合、JQUERY は最良の選択ではありません。私は、Google マップ上にベクター ブループリントをオーバーレイするための巨大な API を開発しました。物事を過度に複雑にしないでください。M1ke が言ったように、JavaScript を使用するときは常にコンソールを開いたままにしてください。

于 2012-05-14T11:25:21.183 に答える
1

それがあなたのコード全体であると仮定すると、それは多くのものになる可能性があります:

  • 正しいフォルダの 3 行目にそのスクリプト ファイルがありますか (コンソールを確認してください)。
  • #map_canvas をターゲットにしていますが、その要素が存在しません。
  • スクリプトをコピーしたら、gmap() メソッドにオプションを渡す必要があります。そうしないと、エラーがスローされます。

JavaScript コンソール (Chrome では Ctrl + Shift + J、Firefox を使用している場合は Firebug をダウンロード) をチェックして、エラー トレースを確認し、そこから修正することをお勧めします。

また、スクリプトを div 内に含める必要はありません。スクリプトに呼び出し要素を認識させる唯一の用途は、ドキュメントの書き込みを使用している場合であり、jQuery を使用しているため、これが当てはまるとは思えません。

于 2012-05-14T11:21:03.967 に答える