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无法正确加载脚本

回答

相关问题