Question

我正在为我们当地的消防员家中编写一个小型javascript应用程序。该应用程序有点像powerpoint等，但在HTML中。在这个应用程序中，我将显示一个谷歌地图地图，其中的路线显示从消防员家到火的路线。我使用jquery从http服务器请求数据。

我的问题是我已经插入了谷歌地图api的代码，浏览器向我显示带有谷歌徽标的地图对象，依此类推。但是没有地图，只有灰色背景。使用鼠标似乎我可以在地图中放大/缩小，滚动等（如果我进行交互，在firebug中将数据传输到google api），但地图不在那里。

我的个人地图api密钥已插入，如果我删除它，插件显示失败。所以我认为这不是问题所在。

jquery和地图api有问题吗？还有其他人遇到这个问题吗？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/standard.css">
    <script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false">
    </script>
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        }
    </script>
</head>
<body>
    <div id="site_content">
        <div id="head_left" class="background_box">
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box">
            <div id="map_canvas" style="width: 100%;height: 100%"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
    <script>
        jQuery.getScript("./js/initialisation.js",function(){initialisation();});
        initialize();
    </script>
</body>

没有内容，因为这都是在运行时通过jquery从服务器加载，然后插入到dom中。

Answer 1

请参阅Mike Williams' description on percentage sized maps from his v2 tutorial

您需要为地图的所有父元素添加定义，以允许浏览器计算非零大小。

working example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        }
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
    <div id="site_content" style="width: 100%;height: 100%;">
        <div id="head_left" class="background_box" >
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box" style="width: 100%;height: 100%;">
            <div id="map_canvas" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
</body>
</html>

Answer 2

我没有看到任何明显错误，但这对我有用。可能只是一个CSS问题。

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.98188, 6.78655),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
        window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
        map.setZoom(12);
        map.setCenter(new google.maps.LatLng(0, 0));
        window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
    }

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

Answer 3

现在对地图一切都很好。谢谢大家的帮助。

现在调试后我知道我之前的代码中有两个问题。 1.百分比尺寸图问题 2.我的div框中定义了溢出：隐藏。在我删除此声明后，现在显示完整的地图。

就像开头一样：谢谢

Answer 4

在我的情况下，这是样式的问题，首先我已经禁用所有这些以查看会发生什么，并且因为地图显示我新的他们负责。然后我将所有样式重新打开并逐行删除，以查看哪一个负责。

Answer 5

<!-- Preloader -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/cookie.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- Optional theme -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS-   >native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

试试这个......

Google Maps API v3 |没有显示地图数据

5 个答案: