html交通路线代码

HTML交通路线代码可用于地图或导航应用程序中。该代码可让您在网站或应用程序上显示交通路线。

!DOCTYPE html>
    html>
    head>
        title>
    交通路线/title>
        script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&
    callback=initMap" async defer>
    /script>
        style>
        #map {
                height: 100%;
        }
        /style>
    /head>
    body>
        div id="map">
    /div>
        script>
        function initMap() {
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,                center: {
lat: 37.7749, lng: -122.4194}
            }
    );
                directionsDisplay.setMap(map);
                calculateAndDisplayRoute(directionsService, directionsDisplay);
        }
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            directionsService.route({
                origin: 'San Francisco',                destination: 'Los Angeles',                travelMode: 'DRIVING'            }
, function(response, status) {
                if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                }
 else {
                        window.alert('Directions request failed due to ' + status);
                }
            }
    );
        }
        /script>
    /body>
    /html>
    

上述代码使用Google Maps API和Directions Service显示地图和交通路线。您需要将YOUR_API_KEY替换为您自己的API密钥。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！