谷歌地图没有加载

时间：2017-04-04 18:41:25

标签： javascript html

在localhost上运行时没有加载Google地图，但直接从磁盘运行时它可以正常工作。我如何解决这个问题？我想找到源和目标之间的距离和方向.html页面加载正确但没有点击获取路线时正在发生。

<DOCTYPE html>
<head>
<title></title>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false&libraries=places"></script>
<script type="text/javascript">
    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({  'draggable': true });
    });

    function GetRoute() {
        var mumbai = new google.maps.LatLng(18.9750, 72.8258);
        var mapOptions = {
            zoom: 7,
            center: mumbai
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('dvPanel'));

        //DIRECTIONS AND ROUTE//
        source = document.getElementById("txtSource").value;
        destination = document.getElementById("txtDestination").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        //DISTANCE AND DURATION//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK &&  response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
</script>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="3">
    <tr>
        <td colspan="2">
            Source:
            <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
            &nbsp; Destination:
            <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
            <br />
            <input type="button" value="Get Route" onclick="GetRoute()" />
            <hr />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="dvDistance">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="dvMap" style="width: 500px; height: 500px">
            </div>
        </td>
        <td>
            <div id="dvPanel" style="width: 500px; height: 500px">
            </div>
        </td>
    </tr>
</table>
<br />
</body>
</html>



`

1 个答案:

答案 0 :(得分：0)

问题：您必须在此处添加google map api密钥才能访问Google地图。

解决方案：：这是使用我的api密钥请生成您自己的并替换为我的。

参见说明：Get your api key here!! 

    <DOCTYPE html>
    <head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false&libraries=places"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBgeepqF19Lq0I2jhEWj88uafs55jmnFso&libraries=places&callback=GetRoute" async defer></script>

    <script type="text/javascript">
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({  'draggable': true });
        });

        function GetRoute() {
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            };
            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('dvPanel'));

            //DIRECTIONS AND ROUTE//
            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

            //DISTANCE AND DURATION//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK &&  response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = document.getElementById("dvDistance");
                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML += "Distance: " + distance + "<br />";
                    dvDistance.innerHTML += "Duration:" + duration;

                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
    </script>
    </head>
    <body>

    <table border="0" cellpadding="0" cellspacing="3">
        <tr>
            <td colspan="2">
                Source:
                <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
                <br />
                <input type="button" value="Get Route" onclick="GetRoute()" />
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvDistance">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </td>
            <td>
                <div id="dvPanel" style="width: 500px; height: 500px">
                </div>
            </td>
        </tr>
    </table>
    <br />
    </body>
    </html>
相关问题
最新问题