Question

我是谷歌地图API的新手，所以请指导我。当我把这段代码放在HTML地图中时，我的页面中没有出现。我无法看到任何东西。

如何解决此问题。

我有这个javascript代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: chicago
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
    }

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);       
</script>

我的HTML + CSS代码：

<style type="text/css">
    #map-canvas {
        width: 80%;
        height: 80%;
        margin: 0px;
        padding: 0px
    }
    #panel {
        position: absolute;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
    }
</style>

<div id="panel"> <b>Start: </b>
    <input type="text" name="start" id="start" onchange="calcRoute();">
<b>End: </b>
    <input type="text" name="end" id="end" onchange="calcRoute();">
</div>
<div id="map-canvas"></div>

Answer 1

您还必须为完整页面添加样式。类似的东西：

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }

    #map-canvas {
    ...
</style>

不知怎的，它不知道你的地图放在哪里。

Answer 2

以下链接对您有所帮助。

http://www.birdtheme.org/useful/v3tool.html

这是关于如何使用v3

Google Map

Google地图未显示在页面中

2 个答案: