Google maps Jquery Mobile未加载Google地图（刷新时除外）

我正在使用jquerymobile1.0和googlemapsv3加载用户位置图。当通过直接url访问地图时，地图可以正常加载，但当从链接访问时，地图会阻塞，不会显示任何内容。如果我刷新页面，则地图加载良好

下面是一个链接，指向模拟问题的测试构建： 单击“我的地图”查看。。。没有什么。点击刷新查看地图加载

以下是地图页面标题中的脚本：

<script type="text/javascript">
    $('#basic_map').live("pageshow", function() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                initialize(position.coords.latitude,position.coords.longitude);
            });
        }
    });
    function initialize(lat,lng) {
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }
</script>

$（“#基本地图”）.live（“页面显示”，函数（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
初始化（位置.坐标.纬度，位置.坐标.经度）；
});
}
});
功能初始化（lat、lng）{
var latlng=新的google.maps.latlng（lat，lng）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}

以下是地图页面正文中的html：

<div data-role="page" id="basic_map">

    <div data-role="header">
        <h1>map test 901</h1>
    </div>
    <div id="map_canvas"></div>
</div>

地图测试901

我还尝试了

pagecreate

而不是

pageshow

，没有明显的区别。你知道我错过了什么吗？

---

谢谢你的建议

我建议改用

pageinit

事件：

从jQuery文档中：

初始化发生后，在正在初始化的页面上触发。我们建议绑定到此事件，而不是DOM ready（），因为无论是直接加载页面还是将内容作为Ajax导航系统的一部分拉入另一个页面，绑定都会起作用

$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

---

如果您从另一个页面导航到此页面，jQM只会在div[data role=“page”]标记中拉入JS，因此如果您的JS位于不会拉入的

标记中，这就是导致您出现问题的原因

同样是的，您应该使用pageinit而不是pageshow，如果您导航回某个页面，pageshow将重新启动，等等。。。如果一个页面被多次加载并且多个页面具有相同的id，那么有一个聪明的技巧可以使用最后一个div[data role=“page”]

jQuery（“div:jqmData（role='page'）：last”）.bind（'pageinit'，function（）{

因此，要获得无故障的答案，请尝试以下方法：

<div data-role="page" id="basic_map">
    <script type="text/javascript">
        $("div:jqmData(role='page'):last").bind('pageinit', function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });
        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }
    </script>
    <div data-role="header">
        <h1>map test 901</h1>
    </div>
    <div id="map_canvas"></div>
</div>

$（“div:jqmData（role='page'）：last”）.bind（'pageinit'，function（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
初始化（位置.坐标.纬度，位置.坐标.经度）；
});
}
});
功能初始化（lat、lng）{
var latlng=新的google.maps.latlng（lat，lng）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
地图测试901

我遇到了相同的问题，无法用JQM事件的模型修复它

最后，我通过将

rel=“external”

添加到所有链接到带有谷歌地图的页面的锚定中，解决了这个问题。这个解决方案可以取消页面转换和预加载的活动

---

又快又脏，但…现在可以用了。

我也有类似的问题，我使用外部js文件

我做错了几件事：

• 需要使用pageinit而不是jquery document ready

---

• 我进行了一次课堂检查，看看lulalala的反应是否令人惊讶-谢谢你解决了我的问题。我根据他的回答更改了HTML代码（class=“gmap\u canvas”而不是id=“gmap\u canvas”）。此外，我还添加了
  google.maps.event.trigger（map，“resize”）
  正确地显示地图
  有关详细信息，请参见函数showMap
  在html中，我将地图的div标记更改为：

  <div data-role="content">
   <div id="container" class="container">
    <div class="gmap_canvas"></div>       
   </div>
  </div><!-- div content -->
  

  我为所有锚定标记添加了rel=“external”-属性：

  <div data-role="navbar" data-theme="b">
  <ul>
  <li><a id="karteLink"   href="index.html" data-icon="karte" data-transition="fade" rel="external">KARTE</a></li>
  <li><a id="listeLink"   href="liste.html" data-icon="liste" data-transition="fade" rel="external">LISTE</a></li>                    
  <li><a id="optionsLink" href="favoriten.html"   data-icon="options"     data-transition="fade" rel="external">OPTIONEN</a></li>
  </ul>
  </div><!-- /navbar   --> 
  

  我的代码（jquery）

  var-activePage；
  $（'#karte'）.live（'pageinit'，函数（事件）{
  activePage=$（event.target）；
  初始化（）；
  });
  函数初始化（）{
  //准备地理编码器
  clearOverlays（）；
  var geocoder=new google.maps.geocoder（）；
  navigator.geolocation.getCurrentPosition（函数（位置）{
  var myLatlng=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
  var myOptions={//默认映射选项
  缩放：12，
  中心：myLatlng，
  mapTypeId:google.maps.mapTypeId.ROADMAP
  };
  showMap（myOptions）；
  google.maps.event.trigger（map，“resize”）；
  findPlaces（）；
  });
  }
  功能显示图（选项）{
  画布=$（“.gmap_画布”，activePage）；
  css（{width:'100%'，height:'100%'，position:'relative'}）；
  map=new google.maps.map（画布[0]，选项）；
  myLatLng=options.center；
  }
  //清除覆盖功能
  函数clearOverlays（）{
  如果（标记）{
  用于（标记中的i）{
  标记[i].setMap（空）；
  }
  标记=[]；
  infos=[]；
  }
  }
  //清除信息功能
  函数clearInfos（）{
  如果（信息）{
  对于（我在infos中）{
  if（infos[i].getMap（））{
  infos[i].close（）；
  }
  }
  }
  }
  //查找自定义位置功能
  函数findPlaces（）{
  var cur_location=myLatLng；
  //准备对地点的请求
  <div data-role="content">
   <div id="container" class="container">
    <div class="gmap_canvas"></div>       
   </div>
  </div><!-- div content -->
  
  <div data-role="navbar" data-theme="b">
  <ul>
  <li><a id="karteLink"   href="index.html" data-icon="karte" data-transition="fade" rel="external">KARTE</a></li>
  <li><a id="listeLink"   href="liste.html" data-icon="liste" data-transition="fade" rel="external">LISTE</a></li>                    
  <li><a id="optionsLink" href="favoriten.html"   data-icon="options"     data-transition="fade" rel="external">OPTIONEN</a></li>
  </ul>
  </div><!-- /navbar   --> 
  
      var activePage;
  
          $( '#karte' ).live( 'pageinit',function(event){
              activePage = $(event.target);
              initialize();
          });
  
          function initialize() {
              // prepare Geocoder   
              clearOverlays(); 
              var geocoder = new google.maps.Geocoder();
              navigator.geolocation.getCurrentPosition(function(position) {
                  var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                  var myOptions = { // default map options
                      zoom: 12,
                      center: myLatlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  showMap(myOptions);
                  google.maps.event.trigger(map, "resize");
                  findPlaces();
              });
          }
  
  
          function showMap( options ) {
              canvas = $('.gmap_canvas', activePage);
              canvas.css({width: '100%', height: '100%', position: 'relative'});
              map = new google.maps.Map(canvas[0], options);
              myLatLng = options.center;
          }
  
      // clear overlays function
      function clearOverlays() {
          if (markers) {
              for (i in markers) {
                  markers[i].setMap(null);
              }
              markers = [];
              infos = [];
          }
      }
  
      // clear infos function
      function clearInfos() {
          if (infos) {
              for (i in infos) {
                  if (infos[i].getMap()) {
                      infos[i].close();
                  }
              }
          }
      }
  
      // find custom places function
      function findPlaces() {
          var cur_location = myLatLng;
          // prepare request to Places
          var request = {
              location: cur_location,
              radius: radius,
              type: [type],
              keyword: [keyword]
          };
          // send request
          service = new google.maps.places.PlacesService(map);
          service.search(request, createMarkers);
      }
  
  // create markers (from 'findPlaces' function)
  function createMarkers(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          // if we have found something - clear map (overlays)
          //Eigene Winzer von der Datenbannk holen
  
          $.getJSON(urlInit, function(data){      
              $.each(data.winzer, function(restaurant, daten){
                  var locationObject = new Object;
                  locationObject.name = daten.name;
                  locationObject.geometry = new Object;
                  locationObject.geometry.location = new google.maps.LatLng(daten.latitude,daten.longitude);
                  locationObject.vicinity = daten.ort;
                  createMark(locationObject);
              }); 
          });
  
          // and create new markers by search result
          for (var i = 0; i < results.length; i++) {
              createMark(results[i]);
          }
      } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
          alert('Sorry, nothing is found');
      }
  }
  
  // creare single marker function
  function createMark(obj) {
  
      // prepare new Marker object
      var mark = new google.maps.Marker({
          position: obj.geometry.location,
          map: map,
          title: obj.name,
          animation: google.maps.Animation.DROP
      });
      markers.push(mark);
  
      // prepare info window
      var infowindow = new google.maps.InfoWindow({
          content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name + 
          '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
      });
  
  
      // add event handler to current marker
      google.maps.event.addListener(mark, 'click', function() {
          clearInfos();
          infowindow.open(map,mark);
      });
      infos.push(infowindow);
  }