谷歌地图和方向没有使用javascript api显示[关闭]答案

【问题标题】：Google maps and directions not showing using javascript api [closed]谷歌地图和方向没有使用javascript api显示[关闭]
【发布时间】：2015-07-10 21:57:38
【问题描述】：

我正在使用 google maps api 来显示地图和方向。用户单击按钮获取位置，并且地理位置未请求许可，并且地图或方向面板未显示，有什么帮助吗？...

javascript

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var directionsService = new google.maps.DirectionsService();
    var rendererOptions = {draggable: true};
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var destin = new google.maps.LatLng(43.52,-89.91);
    var mapOptions = 
    {
        zoom: 13,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        center:destin,
        travelMode:google.maps.TravelMode.DRIVING,
        mapTypeControl:true
    };
    var map = new google.maps.Map(document.getElementById("mapdisplay"),mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));

    function calcRoute() {
        var start = new google.maps.LatLng(lat,lon);
        var end = new google.maps.LatLng(43.52, -89.91);
        var request = 
        {
        orgin:start,
        destination:end,
        travelMode:google.maps.TravelMode.DRIVING,
        };
        directionsService.route(request,function(response,status) {
            if(status==google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        };
    }
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

html

<body>
<p id="demo">Click the button to get your position:</p>
<button onClick="getLocation()">Try it</button>
<br><br>
<div id="mapdisplay" style="float:left;width:600px;height:400px;"></div><br>
<div id="directionsPanel" style="width:600px;height:400px;"></div>
</body>

【问题讨论】：

投票结束，因为不清楚您要问什么。请编辑您的问题，以阐明您要完成什么/什么不起作用。
脚本中存在语法错误（directionsService.route 调用的括号未关闭）

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

你知道每个好的浏览器都有一个开发控制台吗？您缺少括号第 51 行：

directionsService.route(request,function(response,status) {
    if(status==google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

如果您不使用控制台，您将无处可去，因此请确保您了解浏览器的开发工具。

【讨论】：

我修复了这个问题，没有控制台错误，地图显示但没有方向面板，有什么想法吗？