0

マップを読み込めないときに問題が発生しました。ajax経由でページをロードするjQMを使用しています。data-role="page" 内にマップをロードするためのスクリプトを配置しましたが、うまくいきませんでした。また、begin と end にいくつかの console.log を配置しましたが、正常に動作します。これが私のコードです：

<div data-role="page" class="page-nearme" id = "map">
<script>            
$('#map').bind('pagecreate', function(){
console.log('script started to load')
function initialize() {
var mapOptions = {
    mapTypeId :google.maps.MapTypeId.ROADMAP,
    maxZoom: 16
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var defaultBounds = new google.maps.LatLngBounds(
           new google.maps.LatLng(32.773419,-117.172348),
           new google.maps.LatLng(32.773419,-117.172348));
        map.fitBounds(defaultBounds);
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
          }
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
var marker = new google.maps.Marker({
                  map: map,
                 icon: image,
                  title: place.name,
                  position: place.geometry.location
               });

               markers.push(marker);
               bounds.extend(place.geometry.location);
                              }

          map.fitBounds(bounds);
                    });

        google.maps.event.addListener(map, 'bounds_changed', function() {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
              });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        console.log('map loaded')
                    });
           </script>


            <div data-role="header" data-id="navbar" data-position="fixed"  data-tap-toggle="false">
            </div><!-- /header -->

            <div data-role="content">
                <div id="search-panel">
                      <input id="target" type="search" placeholder="Search Box">
                    </div>

                    <div id="map_canvas"></div>

            </div>

            <!-- tabbar -->
            <div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" id ="fxedfooter"data-tap-toggle="false">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a id="menu-item-home" data-icon="custom" href="index.html">&nbsp;</a></li>
                        <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html" class="ui-btn-active ui-state-persist">&nbsp;</a></li>
                        <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html">&nbsp;</a></li>
                        <li><a id="menu-item-invite" data-icon="custom" href="invite.html">&nbsp;</a></li>
                        <li><a id="menu-item-profile" data-icon="custom" href="profile.html">&nbsp;</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div>

        </div>

このページを ajax 経由でロードするときにマップをロードするにはどうすればよいですか?

PS: index.html の先頭に gmap.js を含めました

4

1 に答える 1

0

まず、'load_map(data)' という名前のマップを作成するすべてのコードを含む関数を作成します。次に、この関数を追加して読み込みをトリガーします。これにより、関数 load_map が呼び出され、リクエストが成功した後にリクエストからのデータが渡されます。ps: このコードを別のファイルに入れてインクルードしてください。pagecreate bind で、trigger_load_map を呼び出す

 function trigger_load_map() {
   $.ajax({
     url: url,
     type: "POST",
     dataType: "json",
     data : {},
     success: function(data) {   
       load_map(data); 
     }
   });
 } 


 load_map(data){
   //you code to create map
 }
于 2012-11-16T10:52:57.030 に答える