google-maps - jQuery Mobile 1.0.1 Google map 在重新加载刷新工作后第一次不显示 map

Question

我的问题是每次我打开网站时；第一次 map 不显示，重新加载/引用后它可以工作并显示 map 。

这是我的谷歌地图代码:

<script type="text/javascript">
  var map;
  var infowindow;

  function initialize(position) {
    //var pyrmont = new google.maps.LatLng(48.195201,16.369547);
    var pyrmont = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });
    var a = new google.maps.Marker({position: pyrmont,map: map,icon:'catal.png'});
    var request = {
      location: pyrmont,
      radius: 500,
      types: ['restaurant']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
    if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){
   alert('zero results near this location');
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(    place.name
                                +'<br/>'+place.vicinity);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', function(){
      navigator.geolocation.getCurrentPosition(initialize);
  });
</script>

这是我如何将它与 jquery 一起使用:

<div data-role="page" id="restaurant">
    <div data-role="header">
        <a href="index.html" data-icon="arrow-l">Back</a>
        <h1>Restaurants</h1>    
    </div> 

    <div data-role="content">
        <div id="map" style="width:400px; height:400px;"></div>
    </div> 
</div> 

Answer 1

您正在等待 window.load 事件触发，该事件仅在全页刷新时触发。这是有问题的代码:

google.maps.event.addDomListener(window, 'load', function(){
    navigator.geolocation.getCurrentPosition(initialize);
});

您可以使用 jQuery 绑定(bind)到 #restautant 页面的 pageinit 事件:

$(document).delegate('#restaurant', 'pageinit', function () {
    navigator.geolocation.getCurrentPosition(initialize);
});

当#restaurant伪页面初始化时，这将触发initialize()函数(每次将其添加到DOM时都会发生一次)。

以下是 pageinit 事件(以及所有其他 jQuery Mobile 事件)的文档:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html