0

モバイル デバイス用の店舗検索アプリを作成しています。DB クエリが実行され、距離、lan、lat 値などが取得され、ページに最も近い店舗が表示されます。

次に、ユーザーは「地図で見る」をクリックして、Google マップで店舗と現在の場所を表示できます。ajax() 成功コールバックからのコードの主要部分は次のとおりです。

                success: function(result){

                var rowCount = result.name.length;
                if(rowCount <= 0){
                    $('span.locatorResults').html("There were no stores found within your specified radius.");
                }else{

                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        initializeMapAll(); //This initialise SHOULD be called while the map_canvas div is in the DOM. This is why we have to do hacky workaround of resizing etc.. 
                    });

                    $('span.locatorResults').html("There are " + rowCount + " results within a " + result.radius + " mile radius of your current location:<br /><br />");

                    for (var i = 0; i < rowCount; i++) {

                        var storelatlng = new google.maps.LatLng(
                            parseFloat(result.storeLat[i]),
                            parseFloat(result.storeLon[i])
                        );
                        $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                            createMarkerAll(storelatlng, result.name[i], result.address[i]);
                        });
                    }
                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        createMarkerCurrentLocation(currentlatlng);
                    });
                }                   
            }

私の問題は、map_canvas div が DOM にロードされる前にマップが初期化されていたため、マップ領域の周りにたくさんの灰色のパディングが表示されていたことです。

そこで、地図ページが読み込まれたときに地図とマーカーを初期化することにしましたが、これには多くの .live('pageshow') イベントが必要です。

私の質問は...マーカーを作成する前、およびマップキャンバスがDOMにロードされる前に、マップを初期化する簡単な方法はありますか??? マーカーは（私が知る限り）ajaxリクエストからの成功コールバックで生成される必要があることに注意してください。

御時間ありがとうございます ：）

4

1 に答える 1

1

次の例は、希望どおりに機能します。マーカーは、AJAX 成功関数内で作成されます。テストのために、緯度と経度を含む cityList 配列を作成しました。この cityList 配列を削除し、データを AJAX 応答データから取得する必要があります。

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

            var demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                // perform your AJAX here. In this example the markers are loaded through the cityList array
                $.ajax({
                    type:'post',
                    url:'test.html',
                    data:'',
                    success:function(data)
                    {

                        // imagine that the data in this list
                        // will be retrieved from the AJAX response
                        // i used the cityList array just for testing
                        var cityList = [
                                ['Chicago', 41.850033, -87.6500523, 1],
                                ['Illinois', 40.797177,-89.406738, 2]
                            ],
                            marker,
                            i,
                            infowindow = new google.maps.InfoWindow();

                        for (i = 0; i < cityList.length; i++) 
                        {  
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                                map: map,
                                title: cityList[i][0]
                            });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(cityList[i][0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                    }
                });
            }

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

        </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>      
    </body>
</html>
于 2012-08-30T10:22:39.957 に答える