1

ここでは、最初の「基本的な地図の例」に焦点を当てて、jQuery モバイル Google マップの例を使用しています。

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

にマーカーを動的に追加できるようにしたいのですbasic_mapが、問題が発生しています。jQuery モバイルと JavaScript は初めてです。

これは、jQuery モバイル UI Web サイトの基本マップの例を編集したものです。jQuery モバイルdemosフォルダーに保存すると、すべてが適切にレンダリングされます。地図ページの下部にボタンとaddMarkers機能を追加しました。ページを読み込むと、シカゴに近いmobileDemo座標を中心に地図が表示されますが、そこにはありません。(-41, 87)ボタンをクリックすると、そのchicago時点で別のマーカーでマップを更新したいのですが、画面が空白になります。

これは、私が本当にやりたいことの単なる例です。私の長くて複雑なプログラムでは、データベースにクエリを実行して、クエリに一致する住所を見つけ、それらのマーカーを動的にマップに配置したいと考えています。シカゴ ポイント (またはその場で他のマーカー) をプロットできるようにするには、このソース コードについて何を変更する必要がありますか?

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
        <link type="text/css" rel="stylesheet" href="css/mobile.css" />
        <script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> 
        <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
        <script type="text/javascript">

            var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
            var chicago = new google.maps.LatLng(41.850033,-87.6500523);
            var map 
            function addMarkers(){
                map = new google.maps.Map(document.getElementById('map_canvas'));
                var marker = new google.maps.Marker({
                    map: map,
                    position: chicago
                });
            }

            $('#basic_map').live('pageinit', function() {
                demo.add('basic_map', function() {
                    $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                        var self = this;
                        self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                            self.openInfoWindow({ 'content': 'Hello World!' }, this);
                        });
                    }}); 
                }).load('basic_map');
            });

            $('#basic_map').live('pageshow', function() {
                demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
            });
        </script>
    </head>
    <body>

        <div id="basic_map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
            <div data-role="content">
                <a href="#" data-role="button" data-theme="b" onclick="addMarkers()">Add Some More Markers</a>
            </div>
        </div>      
    </body>
</html>
4

1 に答える 1

2

以下の例を確認してください。

最初の地図の読み込みでは、マーカーはありません。ボタンをクリックすると、ページやマップを更新しなくてもマーカーが動的に追加されます。

<!doctype html>
    <html lang="en">
       <head>
            <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
            <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
            <script type="text/javascript">

                var chicago = new google.maps.LatLng(41.850033,-87.6500523),
                mobileDemo = { 'center': '41,-87', 'zoom': 7 };

                function initialize() {
                    $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
                }

                $(document).on("pageinit", "#basic-map", function() {
                    initialize();
                });

                $(document).on('click', '.add-markers', function(e) {
                        e.preventDefault();
                        $('#map_canvas').gmap('addMarker', { 'position': chicago } );
                });
            </script>
        </head>
        <body>
            <div id="basic-map" data-role="page">
                <div data-role="header">
                    <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                    <a data-rel="back">Back</a>
                </div>
                <div data-role="content">   
                    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                        <div id="map_canvas" style="height:350px;"></div>
                    </div>
                    <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
                </div>
            </div>      
        </body>
    </html>

初期マップ:

ここに画像の説明を入力

ボタンをクリックした後のマップ:

ここに画像の説明を入力

于 2012-08-22T12:30:03.000 に答える