谷歌地图和路线没有显示使用javascript api

时间:2015-05-01 01:57:49

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

我正在使用谷歌地图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>

1 个答案:

答案 0 :(得分:2)

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

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

如果您不使用控制台,则不会去任何地方,因此请确保您了解浏览器的开发工具。