我遇到了问题,但我无法加载我的地图。我正在使用 jQM,它通过 ajax 加载页面。我将地图加载脚本放在 data-role="page" 中,但这不起作用。我还在开始和结束时放了一些 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"> </a></li>
<li><a id="menu-item-near-me" data-icon="custom" href="near-me.html" class="ui-btn-active ui-state-persist"> </a></li>
<li><a id="menu-item-rewards" data-icon="custom" href="rewards.html"> </a></li>
<li><a id="menu-item-invite" data-icon="custom" href="invite.html"> </a></li>
<li><a id="menu-item-profile" data-icon="custom" href="profile.html"> </a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
当我通过 ajax 加载此页面时,如何加载我的地图?
PS:我在 index.html 的头部包含了 gmap.js