logo标签列表

谷歌地图在火狐浏览器中无法显示。

javascripthtmlgoogle-maps
3

在谷歌浏览器中，一切正常。但是在火狐浏览器中加载时，Google地图的右侧将为空白。所有代码功能似乎都正常工作（Spring MVC和Jquery）。您也可以在sameplaces.heroku.com上查看应用程序。谢谢。

 <html>
<head>
    <link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css">
    <script type="text/javascript" src="resources/js/jquery-1.9.1.js"></script>
    <script src="resources/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="resources/development-bundle/ui/jquery.ui.button.js"></script> 
    <link rel="stylesheet" type="text/css" href="resources/css/layout.css"/>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8_h_OaZwi_KRiDev5M8PUxhKRuKbOj1Q&sensor=true">
    </script>
    <script type="text/javascript">
      $(function(){
            $("input[type=submit],input[type=button],a,button")
                .button()
                .click(function(event){
                    event.preventDefault();
                });
      });
      var initialLocation;
      var siberia = new google.maps.LatLng(60, 105);
      var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
      var browserSupportFlag =  new Boolean();
      function initialize() {
        var mapOptions = {
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        if(navigator.geolocation) {
          browserSupportFlag = true;
          navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
          }, function() {
            handleNoGeolocation(browserSupportFlag);
          });
        }
        // Browser doesn't support Geolocation
        else {
          browserSupportFlag = false;
          handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
          if (errorFlag == true) {
            alert("Geolocation service failed.");
            $(".address_search_div").show();
            initialLocation = newyork;
          } else {
              alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
              initialLocation = siberia;
            }
        map.setCenter(initialLocation);
        }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <table width="100%" height="100%">
        <tr>
            <td width="35%" height="100%"><t:insertAttribute name="menu"/></td>
            <td width="65%" height="100%"><t:insertAttribute name="map"/></td>
        </tr>
    </table>
</body>
</html>
元素 map-canvas 在哪里？ - putvande
它在另一个名为“map.jsp”的JSP文件中，我正在使用Spring MVC + Tiles2。现在，“map.jsp”非常简单，该页面只有<div id="map-canvas"></div>。 - ouyadi
在头部有两个 link 标签。最后一个标签使用了 /> 正确地关闭了，而第一个标签没有。 - Anto Jurković
这不是我们问题的原因。 - ouyadi
.address_search_div类的元素在哪里？ - Anto Jurković
1个回答
2

我已经成功地在Chrome和FF上实现了它。为了简化一切，我删除了所有你的CSS和jQuery包含内容。我只添加了这个样式：

    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100% }

Chrome没有问题，但是FF报告如下：

Error in parsing value for 'background'. Declaration dropped.
   -webkit-linear-gradient(left, #000, #fff)

解决方案是添加以下样式（缺少宽度）：
<style type="text/css">
  html { height: 100% ; width: 100%}
  body { height: 100%; width:100%; margin: 0; padding: 0 }
  #map-canvas { height: 100%; width:100% }
</style>

这个解决方案的说明在这里Google Maps V3折线加载失败。请注意，背景也有相同的错误消息。

因此，请检查您的样式。代码似乎没问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接