jQuery Mobile 1.0.1 Google地图不会在重新加载刷新后第一次显示地图 [英] jQuery Mobile 1.0.1 Google Maps doesn't show the map first time after Reload Refresh works

问题描述

我的问题是每次打开网站;第一次地图没有显示出来，在重新加载/引用之后它可以工作并显示地图。

这是我的谷歌地图代码：

 < script type =text / javascript> 
 var map; 
 var infowindow; 
 
函数初始化（位置）{
 // 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，
类型：['restaurant'] 
}; 
 infowindow = new google.maps.InfoWindow（）; 
 var service = new google.maps.places.PlacesService（map）; 
 service.search（request，callback）; 
} 
 
函数回调（结果，状态）{
 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（'this result is near zero'）; 
} 
} 
 
函数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 =pageid =restaurant> 
< div data-role =header> 
< a href =index.htmldata-icon =arrow-l>返回< / a> 
< h1>餐厅< / h1> 
< / div> 
 
< div data-role =content> 
< div id =mapstyle =width：400px; height：400px;>< / div> 
< / div> 
< / div> 
  

解决方案

您正在等待 window.load 要触发的事件只会在整页刷新时触发。这里是违规代码：

  google.maps.event.addDomListener（window，'load'，function（）{
 navigator.geolocation.getCurrentPosition（initialize）; 
}）; 
  

您可以使用jQuery绑定到 pageinit 事件为您的 #restautant 页面：

  $（document）。 （'＃restaurant'，'pageinit'，function（）{
 navigator.geolocation.getCurrentPosition（initialize）; 
}）; 
  

这会触发 initialize（）函数当 #restaurant 伪页面被初始化时（每次添加到DOM时会发生一次）。

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

My problem is everytime i open the website; first time the map doesn't show up, after a reload/refersh it works and shows the map.

Here is my google maps code:

<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>

And here how i use it with 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> 

解决方案

You are waiting for the window.load event to fire which will only fire on full-page-refreshes. Here is the offending code:

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

You can use jQuery to bind to the pageinit event for your #restautant page:

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

This will trigger the initialize() function when the #restaurant pseudo-page is initialized (which will happen once each time it's added to the DOM).

Here is the documentation for the pageinit event (as well as all the other jQuery Mobile events): http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

这篇关于jQuery Mobile 1.0.1 Google地图不会在重新加载刷新后第一次显示地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！