从地理位置页面导航后加载html页面时出现问题

时间:2013-09-23 12:55:45

标签: javascript jquery google-maps google-maps-api-3 geolocation

我正在研究javascript和jquery。我已经创建了2个页面,1将生成当前位置的地图视图,如果我们单击当前位置,它将导航到下一页,该页面将找到用户的纬度和长度,并生成天气报告。但是这两个页面分别工作得很好但是在集成时会生成地图视图,但是当点击天气链接时页面不会被加载。任何建议或帮助将不胜感激。我甚至摆弄了http://jsfiddle.net/mJgdz/我的天气页面的代码并粘贴了我的地理定位代码:

我的HTML凝胶代码:

    <!DOCTYPE html>
     <html>
      <head>
       <title>Getting Geolocation for Weather Details</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map_canvas {
    height: 100%;
  }

  @media print {
    html, body {
      height: auto;
    }

    #map_canvas {
      height: 650px;
    }
  }
    </style>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
   <script type="text/javascript">
  var map;

    function initialize() {
    var myOptions = {
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
     map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

      // Try HTML5 geolocation
      if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

         var infowindow = new google.maps.InfoWindow({
          map: map,
          position: pos,
          content: '<a href="weatherdetails.html">click here for weather details</a>'
          });

          map.setCenter(pos);
          }, function() {
        handleNoGeolocation(true);
         });
        } else {
      // Browser doesn't support Geolocation
        handleNoGeolocation(false);
       }
      }

      function handleNoGeolocation(errorFlag) {
         if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(60, 105),
      content: content
       };

       var infowindow = new google.maps.InfoWindow(options);
       map.setCenter(options.position);
     }

     google.maps.event.addDomListener(window, 'load', initialize);
      </script>
   </head>
   <body>
  <div id="map_canvas"></div>
   </body>
  </html>

0 个答案:

没有答案