Question

我在我的网站上实施了谷歌地图，它发生了一些奇怪的事情。有时，当我加载页面时，地图不会出现，但如果我刷新它。但有时它需要在它出现之前刷新几次，并且它似乎发生了一些样式，第一次加载页面时，某些样式没有应用但是当我加载时，一切看起来都很好。

我不知道应该检查什么。我的老板刚刚告诉我检查调试，我不知道他的意思是什么。

这是我的头部：

<!DOCTYPE html>
<html>
  <head>
    <title>Decorum Wines</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/decorumStyles.css" rel="stylesheet" type="text/css"/>
    <link href="css/decorumStyles_custom.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <link href="css/pager.css" rel="stylesheet" type="text/css"/>
    <script async src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
    <script>       
       var google;

        function initialize() {
            var myLatlng = new google.maps.LatLng(51.5235958, -0.219394, 17);
            var mapProp = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'hello world'
            });
        }

        google.maps.event.addDomListener(window, "load", initialize());

        </script>
  </head>
  <body>

这是我的底部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/toggleBrowse.js" type="text/javascript"></script>
   <script type="text/javascript">

    // Add a script element as a child of the body
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "home.php";
    document.body.appendChild(element);
    }
    // Check for browser support of event handling capability
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    </script>
      </body>
    </html>

我已经查看了我的外部文件的顺序，但我认为它没关系，但是，肯定是它不能正常工作，因为它的行为有点奇怪，正如我所解释的那样。

欢迎任何评论！

谢谢大家！

Answer 1

必须删除此行：
```
...
  @user = User.find(custom_id: params[:id])
...
```
您异步加载maps-API，将自动调用google.maps.event.addDomListener(window, "load", initialize());（因为您将其用作initialize - 参数）。此外，在执行此行时，callback可能尚未出现。
目前还不清楚home.php会做什么（如果它与问题有关），但是当它会做一些基于将在google.maps.event中创建的地图的内容时你应该加载这个initialize
末尾的脚本
```
initialize
```

您的第二个脚本的这一部分也必须删除：

<script>       

function initialize() {
    var myLatlng = new google.maps.LatLng(51.5235958, -0.219394);
    var mapProp = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'hello world'
    });
    downloadJSAtOnload();
}       

</script>

谷歌地图和一些样式需要几次刷新浏览器

1 个答案: