Question

假设我想在地图上显示从某个地方（例如酒店）到我所在城市的博物馆的不同路线。

我会创建与博物馆一样多的按钮，然后在地图上显示每个人从酒店出发的路线。

当我点击按钮时，地图应显示相对路线。

我怎么能用一些javascript和google地图呢？

提前致谢。

Answer 1

Thsi是我的工作解决方案：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Directions service (complex)</title>
        <style>
            html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            }
            #map {
            height: 100%;
            }
            #panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            }

            /**
            * Provide the following styles for both ID and class, where ID represents an
            * actual existing "panel" with JS bound to its name, and the class is just
            * non-map content that may already have a different ID with JS bound to its
            * name.
            */

            #panel, .panel {
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
            }

            #panel select, #panel input, .panel select, .panel input {
            font-size: 15px;
            }

            #panel select, .panel select {
            width: 100%;
            }

            #panel i, .panel i {
            font-size: 12px;
            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="panel">

            <b>End: </b>
            <button class="destinationclass" value="45.711728,11.353489">Teatro Civico</button>
            <button class="destinationclass" value="45.71133,11.3556101">BAR SPORT</button>
            <button class="destinationclass" value="45.710605,11.3550563">PIZZERIA</button>
            <button class="destinationclass" value="45.7128063,11.358291">Comune di Schio</button>


        </div>
        <div id="map"></div>
        &nbsp;
        <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
        <script>

            function initMap() {
                var markerArray = [];

                // Instantiate a directions service.
                var directionsService = new google.maps.DirectionsService;

                // Create a map and center it on Manhattan.
                var initialplace = new google.maps.LatLng(45.712776,11.3586919);

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: initialplace
                });

                var destinationclicked = "45.711728,11.353489";

                // Create a renderer for directions and bind it to the map.
                var directionsDisplay = new google.maps.DirectionsRenderer({map: map});

                // Instantiate an info window to hold step text.
                var stepDisplay = new google.maps.InfoWindow;

                // Display the route between the initial start and end selections.
                calculateAndDisplayRoute(
                directionsDisplay, directionsService, markerArray, stepDisplay, map);
                // Listen to change events from the start and end lists.
                var onChangeHandler = function() {
                    calculateAndDisplayRoute(
                    directionsDisplay, directionsService, markerArray, stepDisplay, map);
                };
                $(".destinationclass").addEventListener('change', onChangeHandler);
            }

            function calculateAndDisplayRoute(directionsDisplay, directionsService,
            markerArray, stepDisplay, map) {
                // First, remove any existing markers from the map.
                for (var i = 0; i < markerArray.length; i++) {
                    markerArray[i].setMap(null);
                }


                // Retrieve the start and end locations and create a DirectionsRequest using
                // WALKING directions.
                directionsService.route({
                    origin: "45.712776,11.3586919",
                    destination: "45.711728,11.353489",
                    travelMode: google.maps.TravelMode.DRIVING
                },
                function(response, status) {
                    // Route the directions and pass the response to a function to create
                    // markers for each step.
                    if (status === google.maps.DirectionsStatus.OK) {
                        document.getElementById('warnings_panel').innerHTML =
                        '<b>' + response.routes[0].warnings + '</b>';
                        directionsDisplay.setDirections(response);
                        showSteps(response, markerArray, stepDisplay, map);
                        } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });


                $(".destinationclass").click(function() {
                    var destinationclicked = $(this).val();

                    // Retrieve the start and end locations and create a DirectionsRequest using
                    // WALKING directions.
                    directionsService.route({
                        origin: "45.712776,11.3586919",
                        destination: destinationclicked,
                        travelMode: google.maps.TravelMode.DRIVING
                    },
                    function(response, status) {
                    // Route the directions and pass the response to a function to create
                    // markers for each step.
                    if (status === google.maps.DirectionsStatus.OK) {
                        document.getElementById('warnings_panel').innerHTML =
                        '<b>' + response.routes[0].warnings + '</b>';
                        directionsDisplay.setDirections(response);
                        showSteps(response, markerArray, stepDisplay, map);
                        } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
            });
        }





    </script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
    async defer></script>
</body>
</html>

Google地图在点击按钮上有不同的路线

1 个答案: