Javascript 如何使用谷歌地图API创建路线_Javascript_Google Maps_Routes

Javascript 如何使用谷歌地图API创建路线

javascript google-maps routes

Javascript 如何使用谷歌地图API创建路线,javascript,google-maps,routes,Javascript,Google Maps,Routes,我试图在两个地方之间创建一条路由，在html文件中明确指出。我试着尽可能地复制谷歌文档，但它似乎不起作用这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt

我试图在两个地方之间创建一条路由，在html文件中明确指出。我试着尽可能地复制谷歌文档，但它似乎不起作用

这是我的密码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Breadcrumbz</title>
    <style>
            #map {
                    height: 400px;
                    width: 100%;
            }
    </style>
</head>

<body>
    <h1>MAP!?!</h1>
    <div id="map"></div>
    <button onclick="calcRoute()">Click me</button>
    <script>
            var directionsDisplay;
            var directionService = new google.maps.DirectionsService();

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

            function calcRoute(){
                    var start = new google.maps.LatLng(41.850033, -87.6500523);
                    var end = new new google.maps.LatLng(37.3229978, -122.0321823);

                    var request = {
                            origin: start,
                            destination: end,
                            travelMode: 'DRIVING'
                    };

                    directionsService.route(request, function(response, status) {
                            if(status == 'OK') {
                                    directionsDisplay.setDirections(response);
                            } else {
                            }
                    });
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHqgK27rLZ-mWuh2Ha1wPCkMGVs0MDoQI&callback=initMap">
    </script>
</body>

</html>


面包屑
#地图{
高度：400px；
宽度：100%；
}
地图！？！
点击我
var方向显示；
var directionService=new google.maps.directionService（）；
函数initMap（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
中心：芝加哥
}
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=new google.maps.LatLng（41.850033，-87.6500523）；
var end=new-google.maps.LatLng（37.322978，-122.0321823）；
var请求={
来源：start，
目的地:完，
travelMode:“驾驶”
};
路由（请求、功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
}否则{
}
});

您的代码中有输入错误。请查看javascript控制台：

uncaughttypeerror:（中间值）不是构造函数

（此行的额外

new

：

var end=new new google.maps.LatLng（37.322978，-122.0321823）；

）

InvalidValueError:setMap:不是Map的实例；也不是StreetViewPanorama的实例
（Map
是initMap
函数的本地，需要传递到calcRoute
或全局）


未捕获引用错误：未定义directionService

（此行键入：var directionService=new google.maps.directionService（）；
，应为directionService
，而不是directionService`）


然后它就起作用了：

代码片段：

var方向显示；
var directionsService=new google.maps.directionsService（）；
函数initMap（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
中心：芝加哥
}
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
方向显示.setMap（地图）；
卡尔克劳特（map）；
}
函数计算器（map）{
var start=new google.maps.LatLng（41.850033，-87.6500523）；
var end=new google.maps.LatLng（37.322978，-122.0321823）；
var请求={
来源：start，
目的地:完，
travelMode:“驾驶”
};
路由（请求、功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
}否则{
警报（“指示请求失败，状态=“+状态”）
}
});
}
google.maps.event.addDomListener（窗口，“加载”，initMap）；
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}