Jquery mobile無法正確加載腳本

我遇到問題，而我不能加載我的地圖。我使用jQM，它通過ajax加載頁面。我把地圖加載腳本放在data-role =「page」裏面，但那沒用。我也把幾個console.log，在開始和結束，他們工作正常。這裏是我的代碼：Jquery mobile無法正確加載腳本

<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

來源

2012-11-16 sanny Sin

首先的頭gmap.js，創建一個函數創建一個名爲「load_map（數據）」地圖中的所有代碼。然後添加這個函數來觸發加載。這將調用你的函數load_map在請求成功後傳遞來自請求的數據。 ps：將此代碼放入其他文件幷包含它。在pagecreate綁定中，調用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-16 10:52:57

Jquery mobile無法正確加載腳本

回答

相關問題