Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API：我只能加载我的地图一次

Javascript 谷歌地图API：我只能加载我的地图一次

javascript html google-maps geolocation

Javascript 谷歌地图API：我只能加载我的地图一次,javascript,html,google-maps,geolocation,Javascript,Html,Google Maps,Geolocation,我正在尝试使用HTML5地理定位和谷歌地图API跟踪我的位置。我设置了所有内容，第一次加载了我的页面。一切似乎都很顺利，地图显示了我所期望的区域，标记也在那里 现在，每当我使用地理定位时，我都会注意到一些非常恼人的事情。我可以加载地图一次，没有问题。但是，当我尝试重新加载页面时，它是绝对空白的，并且在控制台中不会出现错误。有人知道为什么会这样吗 <!DOCTYPE html> <html> <head> <title><%= ti

我正在尝试使用HTML5地理定位和谷歌地图API跟踪我的位置。我设置了所有内容，第一次加载了我的页面。一切似乎都很顺利，地图显示了我所期望的区域，标记也在那里

现在，每当我使用地理定位时，我都会注意到一些非常恼人的事情。我可以加载地图一次，没有问题。但是，当我尝试重新加载页面时，它是绝对空白的，并且在控制台中不会出现错误。有人知道为什么会这样吗

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFDGOMDXkdSHOkVaVbGjIwtMvqaTwVXCA"></script>
    <script type="text/javascript">
      var watchId, geocoder, startLat, startLong;
      var start = 1;

        window.onload = function(){

            if (navigator.geolocation){
                watchId = navigator.geolocation.watchPosition(success, onError, {maximumAge:60000, timeout:500000, enableHighAccuracy:true})
            }
      }
      function success(position){
          console.log('entered success')

          var currentLat = position.coords.latitude;
          var currentLong = position.coords.longitude;

          if (start === 1) {
              startLat = currentLat;
              startLong = currentLong;
              start = 0;
          }

          var geocoder = new google.maps.Geocoder();
          var latlong = new google.maps.LatLng(currentLat, currentLong);

          geocoder.geocode({'latLng': latlong}, function(result, status){
              if (status === google.maps.GeocoderStatus.OK){
                  document.getElementById("location").innerHTML = '<h2> Address is: ' + result[0].formatted_address + '</h2>'
              } else {
                  alert("Could not get the geolocation information")
              }
          });

          var mapOptions = {
              center: new google.maps.LatLng(startLat, startLong),
              zoom: 10,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById("mapArea"), mapOptions);

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(startLat, startLong),
              map: map,
              title: "My First Marker",
              animation: google.maps.Animation.DROP
              //    other effect is BOUNCE
          });

      }

      function onError(error){
          console.log(error);
      }
    </script>
  </head>
  <body>

  <div id="location">

  </div>
  <div id="mapArea" style="height:500px;width:500px;"></div>

  </body>
</html>


var watchId、地理编码器、Startat、Startong；
var start=1；
window.onload=函数（）{
if（导航器.地理位置）{
watchId=navigator.geolocation.watchPosition（成功，onError，{maximumAge:60000，超时：500000，enableHighAccurance:true}）
}
}
功能成功（职位）{
console.log（'输入成功'）
var currentLat=位置坐标纬度；
var currentLong=position.coords.longitude；
如果（开始==1）{
STARTAT=当前LAT；
STARTONG=当前长度；
开始=0；
}
var geocoder=new google.maps.geocoder（）；
var latlong=new google.maps.LatLng（currentLat，currentLong）；
geocoder.geocode（{'latLng'：latlong}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
document.getElementById（“位置”）.innerHTML='地址为：'+result[0]。格式化的_地址+''
}否则{
警报（“无法获取地理位置信息”）
}
});
变量映射选项={
中心：新google.maps.LatLng（Startat，Startong），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapArea”）、mapOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（Startat，Startong），
地图：地图，
标题：“我的第一个标记”，
动画：google.maps.animation.DROP
//另一个效果是反弹
});
}
函数onError（错误）{
console.log（错误）；
}
编辑：添加了开发工具的网络选项卡

您能否查看开发工具中的“网络”选项卡，并查看在请求Google API映射脚本时得到的反馈？如果您在一小时内向同一资源发出几十个请求，您可能会受到速率限制。是在每次刷新后向您请求位置权限，还是您可以看到页面的位置权限被拒绝？@NitishkumarSingh它只请求权限一次，然后再也不会请求权限。@BoffinbraiN我添加了“网络”选项卡的屏幕截图。如果你还需要什么，请告诉我。我应该补充一点，在很长一段时间后，它确实加载了我想要的内容。我只是不明白为什么要花这么长时间。